Portable electronic device with animated image transitions

ABSTRACT

Methods and systems that improve the way media is played, sorted, modified, stored and cataloged on a portable electronic device (e.g., media player) are disclosed. One aspect relates to an image based browser that allows a user to navigate through and select images that are related to media items. In one embodiment, during navigation, transitions between images being displayed can be animated.

CROSS-REFERENCE TO OTHER APPLICATIONS

This application is a continuation of U.S. patent application Ser. No.11/767,409, filed Jun. 22, 2007, entitled “MEDIA PLAYER WITH IMAGEDBASED BROWSING”, which is herein incorporated by reference, and which inturn claims priority to: (i) U.S. Provisional Patent Application No.60/843,832, filed Sep. 11, 2006, entitled “TECHNIQUES AND SYSTEMS FORBROWSING MEDIA CONTENT”, which is herein incorporated by reference; and(ii) U.S. Provisional Patent Application No. 60/878,746, filed Jan. 5,2007, entitled “ELECTRONIC DEVICE WITH IMAGE BASED BROWSERS”, which isherein incorporated by reference.

This application also references U.S. patent application Ser. No.11/519,460, filed Sep. 11, 2006, entitled “MEDIA MANAGER WITH INTEGRATEDBROWSERS”, which is herein incorporated by reference.

BACKGROUND OF THE INVENTION Description of the Related Art

Today, media playback devices, such as media players or music players,have storage capacity to store large collections of media, such asmusic. With such large media collections, in order for a user to selecta particular song to be played by the media player, the user typicallynavigates through a long list of songs. As an example, the user couldinteract with the media player to display a list of artists that havesongs that are stored within the media collection on the media player.The user then scrolls through the list and selects an appropriate songto be played. Unfortunately, however, as the storage capacity of mediaplayers increases, the number of songs stored in a media collection on amedia player increases. Consequently, the list through which users mustnavigate in order to select a song can be extensive.

Therefore, improved methods for browsing through content are desired.

SUMMARY OF THE INVENTION

The invention generally pertains to methods and systems that improve theway media is played, sorted, modified, stored and cataloged on anelectronic device, such as portable electronic device. One aspect of theinvention relates to an imaged based browsing that allows a user tonavigate through and/or select images. In one embodiment, duringnavigation, transitions between images being displayed can be animated.

The invention relates, in one embodiment, to a portable electronicdevice having an imaged based browser window for navigating through andselecting images that are related to data. Selecting an image causes anaction to be initiated at the portable electronic device. The action mayfor example correspond to playing a media item associated with the imageor launching a menu that lists media items associated with the image.Navigating through the images may be initiated with an input arrangementof the portable electronic device. In one example, navigating throughthe images horizontally is provided by rotational user inputs. Inanother example, navigating through the images horizontally is providedby linear user inputs. The user inputs may for example be accomplishedthrough various input devices. In one embodiment, the input device is anobject sensing device such as a touch sensing device. In one example,the input device is selected from touch pads, touch screens and touchsensitive housings.

The invention relates, in another embodiment, to a method for browsingimages stored on a portable electronic device having a display and auser input device. The method includes presenting an image browserwindow that displays a plurality of images from a group of images. Theimages may be associated with media items. The method also includesperforming an action associated with an image when the image isselected. The method further includes transitioning through the group ofimages in accordance with a user input. By way of example, the userinput may be a rotational or linear user input. Furthermore, the inputdevice may for example be a touch sensing device.

The invention relates, in another embodiment, to a portable electronicdevice. The portable electronic device includes a display device. Theportable electronic device also includes a user input device. The userinput device may for example be a touch sensing device such as a touchpad, touch screen or touch sensitive housing. The portable electronicdevice further includes at least one memory device capable of storing aplurality of images associated with one or more data items and computerprogram code for displaying, navigating and selecting the plurality ofimages. The portable electronic device additionally includes aprocessing device operatively connected to the display device, the userinput device and the at least one memory device. The processing deviceis capable of executing the computer program code for displaying,navigating, and selecting the plurality of images. The plurality ofimages from a group of images are displayed, and transitioned through inaccordance with a user input at the user input device. The user inputmay for example be a linear user input or a rotational user input.Furthermore, the images may be configured to move horizontally acrossthe display device during transitioning.

The invention relates, in another embodiment, to a method of operating aportable electronic device. The method includes displaying an imagebased browser window. The method also includes detecting an object overa sensing surface. The sensing surface may for example be a touchsensing surface. The method further includes transitioning throughimages of image based browser in accordance with a navigation inputassociated with a moving object. The object may for example be a fingerswirling, swiping or sliding relative to the sensing surface. The methodadditionally includes presenting selectable data items associated with aselected image in accordance with a first selection input. Moreover, themethod includes initiating an action associated with a selected dataitem in accordance with a second selection input.

The invention relates, in another embodiment, to a handheld electronicdevice having a touch screen display. The touch screen display presentsa plurality of images in at least two groups. A first group is presentedin a first format. A second group is presented in a second format. Theplurality of images is sequentially advanced from the first group to thesecond group in response to a user sliding their finger along a surfaceof the touch screen display. The advancing may be substantiallyproportional the speed of the finger as it is slid along the surface ofthe touch screen display.

The invention relates, in another embodiment, to a handheld electronicdevice having a display and a touch pad. The display presents aplurality of images in at least two groups. A first group is presentedin a first format. A second group is presented in a second format. Theplurality of images sequentially advancing from the first group to thesecond group in response to a user sliding their finger along a surfaceof the touch pad. The advancing may be substantially proportional thespeed of the finger as it is slid along the surface of the touch pad.

The invention relates, in another embodiment, to an electronic device.The electronic device includes a storage device for storing a pluralityof media items and a touch screen display. The electronic device alsoincludes an image browser module operable to present images associatedwith the media items on the touch screen display and to permit a user tobrowse through the images to locate a particular media item within themedia items. The electronic device further includes a playback moduleoperable to play back the particular media item.

The invention relates, in another embodiment, to a computer readablemedium including tangible computer program code executable by a computerfor browsing images stored on an electronic device. The electronicdevice may have a display and a user input device. The computer readablemedium may include at least: computer program code for presenting animage browser window that displays a plurality of images from a group ofimages; computer program code for transitioning through the group ofimages in accordance with at least one user input; computer program codefor selecting one of the images from the group of images following thetransitioning; and computer program code for subsequently performing anaction associated with the selected image.

The invention relates, in another embodiment, to a method fortransitioning between graphical user interface representations on ahandheld electronic device that has a display and a user input device.The method may include at least: displaying a first graphicalrepresentation on the display; receiving a user input with respect tothe user input device; detecting that the received user input requests atransition; and performing an animated transition from display of thefirst graphical representation on the display to display of a secondgraphical representation on the display. Further, in performing theanimated transition, the performing can operate to (i) skew the firstgraphical representation while being transitioned off of the display,and (ii) skew the second graphical representation while beingtransitioned onto the display.

The invention relates, in another embodiment, to a portable electronicdevice. The portable electronic device may include a touch screendisplay configured to operate as a user input device and a user outputdevice; at least one memory device capable of storing a plurality ofimages capable of being displayed on the touch screen display; and aprocessing device operatively connected to the touch screen display andthe at least one memory device. The processing device is capable ofdisplaying one or more of the images on the touch screen display toassist a user with interaction with the portable electronic device. Theprocessing device may also be configured to display a first graphicalrepresentation on the touch screen display, receive a user input via thetouch screen display, detect that the received user input requests ananimated transition, and perform an animation transition to transitionfrom display of the first graphical user representation on the touchscreen display to display of a second graphical representation on thetouch screen display.

BRIEF DESCRIPTION OF THE DRAWINGS

The invention may best be understood by reference to the followingdescription taken in conjunction with the accompanying drawings inwhich:

FIG. 1 is a diagram of an electronic device, in accordance with oneembodiment of the invention.

FIG. 2 is a diagram of a portable electronic device, in accordance withone embodiment of the invention.

FIG. 3 is a diagram of a portable electronic device, in accordance withone embodiment of the invention.

FIG. 4 is a simplified block diagram of a portable electronic devicecapable of storing, cataloging, selecting and outputting data, inaccordance with one embodiment of the present invention.

FIG. 5 is a diagram of a browse windows capable of browsing throughimages, in accordance with several embodiments of the present invention.

FIG. 6 is a diagram of a browse windows capable of browsing throughimages, in accordance with several embodiments of the present invention.

FIG. 7 is a diagram of a browse windows capable of browsing throughimages, in accordance with several embodiments of the present invention.

FIG. 8 is a diagram of a browse windows capable of browsing throughimages, in accordance with several embodiments of the present invention.

FIG. 9 is a method of operating a browser window, in accordance with oneembodiment of the present invention.

FIG. 10 is a menu hierarchy, in accordance with one embodiment of thepresent invention.

FIG. 11 is a menu hierarchy, in accordance with one embodiment of thepresent invention.

FIGS. 12A-12B shows an image based browser when the portable electronicdevice is in a phone or communication mode, in accordance with oneembodiment of the present invention.

FIG. 13 shows an image based browser associated with applications, inaccordance with one embodiment of the present invention.

FIG. 14A-14D shows an image based browser associated with a date book orcalendar, in accordance with one embodiment of the present invention.

FIG. 15 shows an image based browser associated with a photo viewingapplication, in accordance with one embodiment of the present invention.

FIG. 16 shows an image based browser associated with modes of theportable electronic device, in accordance with one embodiment of thepresent invention.

FIG. 17A-17B show an image based browser associated with entering datainto the portable electronic device, in accordance with one embodimentof the present invention.

FIG. 18 is a browsing method, in accordance with one embodiment of thepresent invention.

FIGS. 19A-19H show several examples of object actions used to createnavigation inputs for an image based browser, in accordance with oneembodiment of the present invention.

FIG. 20 is a browsing selection method, in accordance with oneembodiment of the present invention.

FIGS. 21A-21F show several examples of object actions used to createselection inputs for an image based browser, in accordance with oneembodiment of the present invention.

FIG. 22 is a browser method, in accordance with one embodiment of thepresent invention.

FIGS. 23A-23H illustrate an exemplary browsing sequence using themethods described in FIG. 22, in accordance with one embodiment of thepresent invention.

FIGS. 24A-24H illustrate an exemplary browsing sequence using themethods described in FIG. 22, in accordance with one embodiment of thepresent invention.

FIG. 25 is a selection method, in accordance with one embodiment of thepresent invention.

FIGS. 26A-26E illustrate a flipping sequence for use in the embodimentmentioned above.

FIG. 27 is a browsing method, in accordance with one embodiment of thepresent invention.

FIGS. 28A and 28B are diagrams showing the method described in FIG. 27,in accordance with one embodiment of the present invention.

FIG. 29 is a browsing method, in accordance with one embodiment of thepresent invention.

FIGS. 30A and 30B are diagrams showing the method described in FIG. 29,in accordance with one embodiment of the present invention.

FIG. 31 is a browse method, in accordance with one embodiment of thepresent invention.

FIG. 32 is a method of assigning an image to a list, in accordance withone embodiment of the present invention.

FIG. 33 is an operational method for a portable electronic device, inaccordance with one embodiment of the present invention.

FIG. 34 is a diagram showing a device transitioning between a menu basedwindow in portrait mode, and an image based browser is in a landscapemode, in accordance with one embodiment of the present invention.

FIG. 35 is a block diagram of a media device, in accordance with oneembodiment of the present invention.

FIG. 36 is a block diagram of a media management system, in accordancewith one embodiment of the present invention.

FIG. 37 is a method of transferring image data between a host device anda portable media device, in accordance with one embodiment of thepresent invention.

FIG. 38 is an operational method for a portable media device, inaccordance with one embodiment of the present invention.

DETAILED DESCRIPTION OF THE INVENTION

The invention generally pertains to methods and systems that improve theway media is played, sorted, modified, stored and cataloged on anelectronic device, such as portable electronic device. One aspect of theinvention relates to an imaged based browsing that allows a user tonavigate through and/or select images. In one embodiment, duringnavigation, transitions between images being displayed can be animated.

The invention generally pertains to methods and systems that improve theway media is played, sorted, modified, stored and cataloged on anelectronic device, such as portable electronic device. One aspect of theinvention relates to an imaged based browsing that allows a user tonavigate through and/or select images.

In accordance with one embodiment, an electronic device can perform orprovide an image based browser function to perform image based browsing.The image based browser function provides a graphical user interfacethat allows a user to navigate through and/or select images rather thantextual menu items contained in a conventional menu list (e.g., verticalmenu). Image based browsing can provide efficient, graphical browsing(e.g., scrolling) through a group of digital items that can are or canbe represented in a visual manner.

The images being browsed may be related or linked to data. For example,the images may be associated with media files, address files, date bookfiles, document files, applications, modes, etc. In one embodiment,image browsing may be implemented to mimic turning pages or flippingthrough rolodex or calendar, or flipping through LP records or CD's in abin.

These and other embodiments of the invention are discussed below withreference to FIGS. 1-38. However, those skilled in the art will readilyappreciate that the detailed description given herein with respect tothese figures is for explanatory purposes as the invention extendsbeyond these limited embodiments.

FIG. 1 is a diagram of an electronic device 2, in accordance with oneembodiment of the invention. The electronic device 2 may for example bea portable electronic device that is easily transported or conveyed.

The electronic device can for example correspond to a computer (e.g.,personal computer), mobile phone (e.g., cellular phone), personaldigital assistant (PDA), media player (e.g., music, videos, games,images), media storage device, camera, remote control, and/or the like.The electronic device may also be a multi-functional device that combinetwo or more of these device functionalities into a single device.Examples of multi-functional devices can be found in U.S. ProvisionalPatent Application No. 60/658,777 filed Mar. 4, 2005 and entitled“MULTI-FUNCTIONAL HAND-HELD DEVICE”, which is herein incorporated byreference.

The electronic device may further be a hand-held electronic device. Theterm hand-held generally means that the electronic device has a formfactor that is small enough to be comfortably held in one hand. Ahand-held electronic device may be directed at one-handed operation ortwo-handed operation. In one-handed operation, a single hand is used toboth support the device as well as to perform operations with the userinterface during use. In two-handed operation, one hand is used tosupport the device while the other hand performs operations with a userinterface during use or alternatively both hands support the device aswell as perform operations during use. In some cases, the hand-heldelectronic device is sized for placement into a pocket of the user. Bybeing pocket-sized, the user does not have to directly carry the deviceand therefore the device can be taken almost anywhere the user travels(e.g., the user is not limited by carrying a large, bulky and oftenheavy device).

In accordance with one embodiment, the electronic device 2 is capable ofperforming an image based browser function. The image based browserfunction provides a graphical user interface that allows a user tonavigate through and/or select images rather than textual menu itemscontained in a conventional menu list (e.g., vertical menu). It shouldbe noted however that the electronic device 2 is not limited to imagebased browsers and often includes both menu driven lists and image basedbrowsers. In fact, the electronic device 2 may be configured to operatein either configuration depending on the needs of the device, softwareplatform and/or user. In some cases, the electronic device 2 may evenoperate both menu driven lists and image based browsers at the sametime.

Generally speaking, the image based browser provides a scrolling typeaction that permits a user to flip through images in an efficient anduser friendly manner. The images generally describe graphically someaspect of a file stored on the electronic device 2. In many cases, thebrowser includes at least a viewing area which provides a location whereimages from a group of images are taken in and out of view. The viewingarea typically only displays a small portion of the total number ofimages that are available in the group of images. The images may forexample move from one position to the next position along a path that iscontained or spread across the viewing area. The path can be an openended line fixed along an axis such as horizontal or vertical axis.Alternatively, the path may not be fixed along an axis. For example, thepath may be associated with a waveform (e.g., sinusoidal). In othercases, the path may be closed ended thereby forming a shape. Forexample, the path may follow a shape such as circular, oval, triangular,square, rectangular, and/or the like.

The images contained in the browser may be widely varied. The images mayfor example be album art, which represents one or more songs stored onthe portable electronic device. The images may also be thumbnailpictures of photos stored on the portable electronic device. The imagesmay also be icons that represent applications stored on the portableelectronic device. The images may also represent months or days of adate book which is stored on the portable electronic device. The imagesmay also be pictures of people whose information is stored in an addressbook of the portable electronic device. The images may also be iconsthat represent various modes of the portable electronic device. Theimages may also be symbols or characters for inputting information intothe portable electronic device. The images may also be images ofdocuments such as PDF, word processing or spreadsheet documents (e.g.,pdf, doc, xls).

Additional details on image based browsers and menu lists for electronicdevices are provided in: (1) U.S. patent application Ser. No.10/282,861, filed Oct. 28, 2002 and entitled “GRAPHICAL USER INTERFACEAND METHODS OF USE THEREOF IN A MULTIMEDIA PLAYER”, (2) U.S. patentapplication Ser. No. 11/519,460, filed Sep. 11, 2006 and entitled “MEDIAMANAGER WITH INTEGRATED BROWSERS”, both of which are herein incorporatedby reference.

Further details regarding image based browsers and menu lists will bedescribed in greater detail below.

In the illustrated embodiment, the electronic device 2 is a portableelectronic device that includes a housing 4, at least one display device6 and one or more user input devices 8, all of which can be located on afront, side, and/or back surface of the housing 4. The display device 6may for example be used to display an image based browser 3 that isassociated with the image based browser function and the user inputdevices 8 may be used to navigate through and/or select images, whichare stored on the portable electronic device 2. Of course, the displaydevice 6 and input devices 8 can also be used for other functionalitiesof the portable electronic device 2 including for example menu drivenlists.

The display device 6 can, for example, include a liquid crystal display(LCD), display, an organic light emitting diode (OLED) display, adisplay based on electronic inks, and/or the like. The display device 6may have a variety of different configurations depending on the overallfootprint of the portable electronic device 2. By way of example, andnot by way of limitation, the display device 6 may have a traditionalaspect ratio of about 4:3 or it may have an aspect ratio that is morepanoramic such as 16:9.

In one embodiment, the electronic device 2 includes a small display at aportion of the front surface of the electronic device 2. In anotherembodiment, the display device 2 is configured to cover at least amajority of the front surface of the electronic device 2. For example,the area of the display device may consume greater than 50% of the areaof the front surface, and further greater than 75% of the area of thefront surface. The electronic device 2 may be configured with a fullscreen display or a near full screen display that consumes, or at leastdominates, a surface (e.g., front surface) of an electronic device 2. Inone implementation, a full screen display consumes substantially theentire front surface of the electronic device 2 (in both directions).The full screen display may extend edge to edge or it may fit within asmall bezel of the housing at the edge of the device.

In addition, the user input devices 8 can, for example, include one ormore mechanically and/or electrically driven input devices. Mechanicallydriven input devices include such mechanisms as buttons, keys, switches,dials, navigation pads, joysticks, jog balls, and/or the like.Electrically driven input devices may include for example object sensingdevices such as proximity sensing devices that detect objects locatedabove a surface (e.g., front surface) and/or touch sensing devices thatdetect objects touching a surface (e.g., front surface). Examples oftouch sensing devices include touch pads, touch screens and touchsensitive housings, and/or the like.

The number and combination of input devices used in the electronicdevice generally depends on the desired needs of the electronic device.In most cases, the electronic device 2 includes at least input devicesfor navigating and selecting content stored on the electronic device 2.

In one embodiment, navigation commands for traversing through images ofthe image based browser are generated by rotational and/or linear userinputs. Of course, the navigation commands may also be used fortraversing through menu lists. Devices for linear user inputs includefor example touch devices, proximity devices, mechanical sliders,vertical or horizontal scroll wheels, soft scroll bars and/or the like.Devices for rotational user inputs include for example touch devices,proximity devices, mechanical dials, soft dials and/or the like.Selection commands for selecting images and menu items may beimplemented through the same input devices used for navigation, oralternatively through separate input devices. For example, a touch padmay be used for navigation while selections may be made with a button,or alternatively a touch screen may be used for both navigation andselections.

The layout of the I/O device can be widely varied. In some embodiment,all of the necessary I/O devices for displaying and navigating throughmenus/browsers and making selections thereof are located on the frontsurface of the portable electronic device 2. The user is thereforecapable of easily manipulating the input devices 8 while viewing thedisplay device 6.

In one embodiment, the front surface of the portable electronic device 2is divided into a display region and an input region. For example, thedisplay region may be located at a top portion of the front surface andthe input region may be located at a bottom portion of the frontsurface. As one example, this may be implemented with a small landscapedisplay device in the upper half of the front surface and a touch pad ortiltable navigation pad along with one or more buttons in the lower halfof the front surface. In another embodiment, the display and inputregions are configured to substantially cover the same area of the frontsurface (whether a portion or substantially the entire front surface).This may be implemented with a touch screen that overlays a display. Ineither embodiment, the device may additionally include other controlsand ports on the top, bottom and side surfaces.

Additionally, internal to the housing 4 of the portable electronicdevice 2 are various software or electrical components in support of thebrowser function and other functions of the portable electronic device2.

FIG. 2 is a diagram of a portable electronic device 10, in accordancewith one embodiment of the invention. The portable electronic device 10can, for example, represent one implementation of the electronic device2 shown in FIG. 1.

In this embodiment, the portable electronic device 10 includes arotational user input device 14 that is provided on a front surface ofthe housing 4 along with the display device 6. The rotational user inputdevice 14 receives at least rotational user inputs from a user of theportable media player 10 to interact with menus, lists, browsers, etc.being displayed on the display device 6. The rotational user inputdevice 14 can for example correspond to a dial or a touch pad. In thecase of a dial, a circular platform is rotated about an axis in order togenerate rotational user inputs. In the case of a touch pad, an objectsuch as a finger is swirled around a touch sensing platform in order togenerate rotation user inputs (e.g., arcuate or circular motions). Thetouch sensing platform may have a circular shape to help facilitate acircular motion.

The rotational user input may enable navigation through a group ofimages associated with an image based browser. For example, as shown,the rotational user input may be used to scroll through images that movealong a predetermined path from one position to the next (e.g.,horizontally in and out of screen). Aspects of the traversal may bebased on one or more characteristics of the circular motion includingbut not limited to direction, speed, acceleration, and/or the like.

The portable electronic device 10 can also support variousbutton-actions via one or more button-action regions 16-22. Thebutton-action regions 16-22 can be separate from or integrated with therotational user input device 14. In one embodiment, the button actionregions can be integrated within the surface or platform of the rotationuser input device 14. However, in other embodiments, the button actionregions can be provided at other locations on the housing 4 of theportable electronic device 10. For example, they may surround therotational user input device or they may be spatially separated from therotational user input device 14.

The user of the portable electronic device 10 can press on or proximateto the button-action regions 16-22 to signal the portable electronicdevice 10 as to a particular user input. The button-action regions 16-22can provide button-like functions. As an example, the button-actionregions 16-22 can respectively correspond to common media player inputsof Menu, Next, Back, and Play/Pause. Alternatively, the button-actionregions can correspond to common phone inputs as for example 1, 2, 3, 4,5, 6, 7, 8, 9, 0, *, and #.

The portable electronic device 10 can also include a select buttonregion 24. The select button region 24 can be separate from orintegrated with the rotational user input device 14. In the illustratedembodiment, the select button region 24 is provided at the center of therotational user input device 14. However, in other embodiments, theselect button region 24 can be provided at other locations on thehousing of the portable electronic device 10.

The select button region 24 generally provides a select or enter type offunction. The user of the portable media player 10 can press on orproximate to the select button region 24 to signal the portableelectronic device 10 that a selection should be made. For example, theselect button region 24 can be used to select an image of the imagebrowser.

Additional details on rotational user input devices for electronicdevices are provided in: (1), U.S. patent application Ser. No.10/722,948, filed Nov. 25, 2003 and entitled “TOUCH PAD FOR HANDHELDDEVICE”, (2) U.S. patent application Ser. No. 10/188,182, filed Jul. 1,2002 and entitled “TOUCH PAD FOR HANDHELD DEVICE”, (3) U.S. patentapplication Ser. No. 10/643,256, filed Aug. 18, 2003 and entitled“MOVABLE TOUCH PAD WITH ADDED FUNCTIONALITY”, (4) U.S. patentapplication Ser. No. 10/256,716, filed Sep. 26, 2002 and entitled“METHOD AND APPARATUS FOR ACCELERATED SCROLLING”, (5) U.S. patentapplication Ser. No. 10/259,159, filed Sep. 26, 2002 and entitled“METHOD AND APPARATUS FOR USE OF ROTATIONAL USER INPUT”, (6) U.S. patentapplication Ser. No. 11/483,008, filed Jul. 6, 2006 and entitled“CAPACITANCE SENSING ELECTRODE WITH INTEGRATED I/O MECHANISM”, (7) U.S.patent application Ser. No. 11/482,286, filed Jul. 6, 2006 and entitled“MUTUAL CAPACITANCE TOUCH SENSING DEVICE”, (8) U.S. Patent PublicationNo. 2003/0076301, (9) U.S. Patent Publication No. 2003/0095096, (10)U.S. Patent Publication No. 2003/0055446, (11) U.S. Pat. No. 7,046,230and (12) U.S. Pat. No. 7,084,856 B2 all of which are herein incorporatedby reference.

It should be appreciated that linear user input devices mayalternatively be used in place of or in addition to the rotational userinput device. The linear user input device for example receives at leastlinear user inputs from a user of the portable electronic device 10 tointeract with menus, lists, browsers, etc. being displayed on thedisplay device 12. The linear user input device can for examplecorrespond to a mouse scroll wheel, slider mechanism or a touch pad. Inthe case of a mouse scroll wheel, a wheel is rotated about an axis inorder to generate linear user inputs. In the case of a slider mechanism,a knob is physically translated up or down or side to side in order togenerate linear user inputs. In the case of a touch pad, an object suchas a finger is swiped or slid up or down or side to side about a touchsensing platform in order to generate linear user inputs. The linearuser input may be used to navigate through a group of images associatedwith an image based browser.

FIG. 3 is a diagram of a portable electronic device 21, in accordancewith one embodiment of the invention. The portable electronic device 30can, for example, represent one implementation of the portableelectronic device 2 shown in FIG. 1.

In this embodiment, the portable electronic device 21 includes a touchscreen display 23 that senses objects sliding across its surface. Theobjects may for example be one or more fingers. The touch screen display23 is capable of detecting various actions including rotational motionsassociated with rotation user inputs 25 and/or swipes or slidesassociated with linear user inputs 27 to interact with menus, lists,browsers, etc. being displayed on the touch screen display 23. The touchscreen display 23 is also capable of detecting pressing, tapping orholding actions, which can be associated with selection user inputs. Ofcourse, the touch screen display is capable of detecting other types ofactions as well. The actions are sometimes referred to as gestures.

The touch screen display 23 may consume a large area of the frontsurface of the portable electronic device 21. By way of example, thetouch screen display may be a full or near full screen display.

Furthermore, the touch screen display 23 may be capable of sensingmultiple touches at the same time (e.g., multipoint sensing).

Touch screen displays have several advantages over other inputtechnologies. For example, the touch screen sensing is positioned infront of the display and therefore the user can manipulate the GUIdirectly. In addition, the touch screen allows the display area to beenlarged as other input means are typically not necessary.

Additional details on touch screen displays and gestures for electronicdevices are provided in: (1) U.S. patent application Ser. No.10/840,862, filed May 6, 2004 and entitled “MULTIPOINT TOUCHSCREEN”, (2)U.S. patent application Ser. No. 10/903,964, filed Jul. 30, 2004 andentitled “GESTURES FOR TOUCH SENSITIVE INPUT DEVICES”, (3) U.S. patentapplication Ser. No. 11/038,590, filed Jan. 18, 2005 and entitled“MODE-BASED GRAPHICAL USER INTERFACES FOR TOUCH SENSITIVE INPUTDEVICES”, (4) U.S. Provisional Patent Application No. 60/763,605, filedJan. 30, 2006 and entitled “GESTURING WITH A MULTIPOINT SENSING DEVICE”,(5) U.S. patent application Ser. No. 11/057,050, filed Feb. 11, 2005 andentitled “DISPLAY ACTUATOR”, all of which are herein incorporated byreference.

Additionally or alternatively, the electronic device may include aproximity sensing device that senses objects hovering over rather thantouching the front surface of the electronic device. Examples ofproximity sensing devices can be found in U.S. patent application Ser.No. 11/241,839, filed Sep. 30, 2005 and entitled “PROXIMITY DETECTOR INHANDHELD DEVICE”, and U.S. patent application Ser. No. 11/240,788, filedSep. 30, 2005 and entitled “PROXIMITY DETECTOR IN HANDHELD DEVICE”,which are herein incorporated by reference.

Additionally or alternatively, the electronic device may include a touchsensing housing that senses objects on portions of the housing thatsurround the display. In one example, the bezel that surrounds the edgeof the display may include an embedded touch sensing device capable ofreceiving linear motions associated with linear user inputs. Examples oftouch sensing devices utilized in housings can be found in U.S. patentapplication Ser. No. 11/115,539, filed Apr. 26, 2005 and entitled “HANDHELD ELECTRONIC DEVICE WITH MULTIPLE TOUCH SENSING DEVICES”, which isherein incorporated by reference.

FIG. 4 is a simplified block diagram of a portable electronic device 50capable of storing, cataloging, selecting and outputting data, inaccordance with one embodiment of the present invention. The electronicdevice 50 may for example correspond to any of those electronic devicesmentioned previously with regards to FIGS. 1-3.

The electronic device 50 includes a controller 52 configured to manageoperations performed at the electronic device 50. The controller 52 mayreceive inputs from various input devices 54. The input devices may forexample be selected from buttons, keys, mechanical pads, touch pads,touch screens, and the like.

The controller 52 may also be configured to control outputs throughvarious output devices 58. The output devices 58 may for example includea display 58A and one or more speakers or speaker jacks 58B. By way ofexample, image based data such as video and images may be outputted viathe display 58A and audio based data such as music or voice may beoutputted via one or more speaker or speaker jacks 58B.

The controller 52 may additionally be configured to generate graphicaluser interfaces 60 on the display 58A. The graphical user interface 60provides an easy to use interface for controlling operations performedat the electronic device. The graphical user interface 60 may be createdusing data stored locally in a database 64. The database 64 generallyincludes information that describes various aspects of files stored at afile system 66. The information may for example include metadata,descriptors and images associated with particular files. By way ofexample, in the case of songs, the information may include song name,album name, artist name, time, genre, album art, and the like.

Generally speaking, the GUI 60 represents applications, files andoperational controls with graphical images. The graphical images mayinclude windows, fields, dialog boxes, menus, icons, buttons, cursors,scroll bars, folders, lists, text, etc. Such images may be arranged inpredefined layouts, or may be created dynamically to serve the specificactions being taken by a user. During operation, the user can select andactivate various graphical images in order to initiate functions andtasks associated therewith. By way of example, a user may select abutton that opens, closes, minimizes, or maximizes a window, or an iconthat launches a particular application or functionality. The GUI canadditionally or alternatively display information, such as noninteractive text and graphics.

In accordance with one embodiment, the controller 52 is configured togenerate one or more graphical user interfaces 60 for scrolling ortraversing through data files stored locally at the electronic device.In one embodiment, a first GUI is configured to present textual dataassociated with data files. The textual data may for example bepresented in vertical rows as part of a menu list. In anotherembodiment, a second GUI is configured to present images associated withdata files pulled from the database 44. The images may for example bepresented in an image based browse window provided by an image basedbrowser. The image based browse window allows a user to browse throughimages instead of rows of text based menu items. In both embodiments,the data for building the GUI can be stored in the database 64. That is,when the controller 52 is assigned the task of generating the GUI, theappropriate data associated with the files to be presented are acquiredfrom the database. When rendering the images on a display device, thecontroller 52 can also produce transitions, animations, shadows,reflections or other visual effects.

With either GUI, a user of the portable electronic device is able toscroll through the menu or the images by making an input. In oneembodiment, the input is a rotational user input created either byswirling his or her finger across a touch pad/touch screen/touchsensitive housing or by rotating a dial. In this embodiment, as thefinger moves around the touch pad/touch screen/touch sensitive housingor as the dial is rotated, the displayed items from the list of mediaitems or the images from the group of images are varied such that theuser is able to effectively scroll through the list of media items andthe group of images. In another embodiment, the input is a linear userinput created either by swiping his or her finger across a touchpad/touch screen/touch sensitive housing or by translating a mechanicalslider or by rotating a scroll wheel. In this embodiment, as the fingerslides along the touch pad/touch screen/touch sensitive housing or asthe slider mechanism is translated or the scroll wheel is rotated, thedisplayed items from the list of media items or the images from thegroup of images are varied such that the user is able to effectivelyscroll through the list of media items and the group of images.

Although not shown, the device may additionally include one or more datacapture devices such as microphones or cameras. Data capture devices areconfigured to capture data in the form of audio, images or video. Thecontroller 52 is configured to catalog the data and store in the mediadatabase and/or in appropriate files.

Although not shown, the device may additionally include an I/O portwhich provides connectivity to other devices and/or systems. The I/Oport may for example allow the portable electronic device to communicatewith a host device, peripheral I/O devices or power supplies. This mayfor example be accomplished through wired or wireless connections.

Although not shown, the device may further include one or more devicesthat provide audio and/or haptic feedback to a user. The audio feedbackcan, for example, be a clicking or flipping sound. The haptic feedbackcan for example be pulsed vibrations. In one embodiment, the feedbackcoincides with data traversal. As the rate of transitioning through dataincreases or speeds up, the frequency of the feedback increases. Inaddition, when the rate of transitioning through data decreases orslows, the rate of transitioning through the data decreases, thefrequency of the feedback decreases. Hence, the feedback is provided tothe user as to the rate in which the data is being traversed. The datamay for example be items in a hierarchal menu list and/or imagesassociated with an image based browser.

FIGS. 5-8 are various diagrams of a browse windows 80A-D capable ofbrowsing through images, in accordance with several embodiments of thepresent invention. The browse windows 80A-D may for example be used inthe graphical user interface of FIG. 4. In each of these embodiments,the browse windows 80A-D provides a scrolling type action that permits auser to scroll or flip through images 86 in an efficient and userfriendly manner. The images 86 typically describe graphically someaspect of one or more data files. In the case of a song file, the image86 may be album art. In the case of an audio book file, the image 86 maybe a book cover. In the case of a movie file, the image 86 may be posterart. In the case of a game file, the image 86 may be the cover jacket ofthe game. In the case of a photo file, the image 86 may be thumbnailpicture. In the case of an address book, the image 86 may be a pictureof a person. In the case of a document (e.g., a pdf file), the image maybe a rendering of the document. For example, the image may be athumbnail image of the first page of the pdf document, and may includeindication if it is a multiple page document (layered images).

Once a desired image 86 is found, the user can select the desired image86 in order to initiate an action associated with the image 86. Forexample, an album art image may be selected to open a menu containingthe songs on the album and/or to start playing a song on the album.

As shown in FIGS. 5-8, the browse windows 80A-80D each include a viewingarea 82. The viewing area 82 provides a location where images 86 from agroup of images are taken in and out of view. The viewing area 82typically only displays a small portion of the total number of images 86that are available in the group of images. In most cases, the images 86move from one position to another along path or line that is spreadacross the viewing area 82. The path or line may be straight, angled,curved, stepped, waved, serpentine or the like. The number of positionsalong the line may be widely varied and is typically determined by thesize of the viewing area 82, the desired size of the images 86, thelength of the path or line and the desired number of images 86 to beviewed at any one time. In some cases, the images 86 may be movedthrough the viewing area 82 with a visual transition effect oranimation. Sound effects such as clicks or flipping noises or vibrationsmay also be used.

In most cases, the images 86 are presented in a primary position 92 andone or more secondary positions 94 that are next to the primary position92. The primary position 92 is the location where the images 86 movewhen they are to be selected. That is, in one implementation, the images86 can be selected when they are in the primary position 92. In essence,placing the images 86 in the primary position 92 is analogous tohighlighting the image 86 (selected but not activated). The secondarypositions 94 are holding positions, and the images 86 located thereonare locked from activation. Although limited by their number, the images86 at the secondary positions 94 allow a user to view what images 86that are before and after the primary image thereby making browsingeasier (the user can visually scan which images are of interest andwhich are not). In some cases, the user may click on an image at asecondary position 94 in order to move it from the secondary position 94to the primary position 92. In one embodiment, selection of an image ata secondary position results in rapid traversal through the group ofimages until the selected image is finally moved into the primaryposition 92.

The layout and configurations of the images 86 may be widely varied. Inone embodiment, the image 86 at the primary position 92 is made to standout from the images 86 at the secondary positions 94. This may beaccomplished by reformatting or configuring the secondary imagesdifferently from the primary image thereby alerting the user as to whichimage is primary and which images are secondary (e.g., by adjusting thesize and/or shape of the images). For example, the secondary images maybe minimized, obscured, distorted, partitioned, segmented or otherwisemodified, altered or adjusted. Additionally or alternatively, this maybe accomplished with a graphical highlight effect that shades, surroundsor underlines the image at the primary position. For example, thebrowser may include a highlight window that the image at the primaryposition 92 moves under when transitioning across the viewing area 82.Additionally or alternatively, this may also be accomplished by placingan identifier or descriptor underneath or over the image at the primaryposition 92. For example, the identifier may be the name or titleassociated with the media file the image represents. By way of example,in the case of a song file, the image may be album art and theidentifier may include the artist and album name.

In accordance with one embodiment, when prompted by the user, the inputarrangement is configured to generate navigation commands for traversingthrough the images. In one example, the user simply swirls their fingerclockwise or counter clockwise around a touch sensing surface in orderto traverse through the images 86. In another example, the user simplyswipes their finger across a touch sensing surface in order to traversethrough the images 86.

FIGS. 5-8 will now be described in detail. In FIG. 5, the path or lineis a straight line that runs horizontally across the viewing area 82.During traversal, the images 86 move horizontally as a group across theviewing area 86 from one position to another. When a user initiates aleft navigation command, a new image 86 appears at the left position ofthe viewing area 82 and all other images 86 move over one position. Ifthe viewing area is full, the right most image 86 moves out of theviewing area 82. Similarly, when a user initiates a right navigationcommand, a new image 86 appears at the right position of the viewingarea 82 and all other images 86 move over one position. If the viewingarea is full, the left most image 86 moves out of the viewing area 82.This allows a user to view consecutive images currently held outside ofthe viewing area 82. Furthermore, the images 86 in the secondarypositions 94 are typically made smaller than the image 86 in the primaryposition 92. During browsing, when the images 86 are moved from primaryposition 92 to secondary position 94, the images 86 can decrease in sizeand when the images 86 are moved from secondary position 94 to primaryposition 92, the images 86 can increase in size.

FIG. 6 is similar to FIG. 5 in that the images 86 move horizontallyacross the viewing area 82. However, unlike FIG. 5, the images 86 at thesecondary positions 94 are made to appear as if they are layered ratherthan being spatially separated as in FIG. 5. This allows more images tobe presented. In this implementation, each consecutive secondary imagepartially falls underneath the previous image thereby leaving an edgeportion exposed 87. The exposed portion 87 may provide enough visualinformation for a user to identify the image. The exposed edge portion87 may also include text based information. During browsing, when theimages 86 are moved from the primary position 92 to subsequent secondarypositions 94, the images 86 are reconfigured as a partially exposed edgeportion 87 and when the images 86 are moved from secondary position 94to the primary position 92, the images are reconfigured to be a fullimage view. The images may be reconfigured on the fly or they may bestored in a media database along with the full view images.

FIG. 7 is similar to FIG. 6 in that the images 86 move horizontallyacross the viewing area 82 and are layered so that more images 86 can bepresented. However, unlike FIG. 7, the secondary images immediately nextto the primary image are in full view (or substantially full view) witheach consecutive secondary image falling underneath the previous imagebeing a partial view.

Furthermore, the images at the secondary positions 94 may be skewed inorder to make it look like they are extending from the foreground intothe background (e.g., 3D effect). This effect may be created by loweringthe top right corner and raising the bottom right corner of each imagein a left secondary position and by lowering the top left corner andraising the bottom left corner of each image in a right secondaryposition. During browsing, when the images 86 are moved from primaryposition 92 to secondary position 94, the images 86 are skewed and whenthe images 86 are moved from secondary position 94 to primary position92, the images 86 are normal.

Moreover, the images 86 may include a reflected portion 96 that extendsdownward from the base of the image 86. The reflected portion 96 may becreated by making a copy of the image, cropping the copy of the image(e.g., shortening), vertically flipping the cropped image, altering thetransparency of the flipped image from semi transparent at the top tofully transparent at the bottom (e.g., gradient), and attaching the topof the flipped image to the bottom of the image. Thereafter, the imagesand any corresponding reflected portion at the secondary positions 94can be skewed individually or as a combination. The images 86 may belaid over a black background to further aid the reflection effect.

Similar to FIG. 7, FIG. 8 includes layered and skewed images. However,unlike the previous embodiments, FIG. 8 includes an oval path aroundwhich the images 86 are rotated. As such, all the images 86 can be foundin the viewing area 82. This embodiment is somewhat analogous of arolodex where pages flip around a pivot axis (e.g., virtual rolodex).Also in this embodiment there are two full size central images, one ofwhich is the primary image and one that is a secondary image.

Furthermore, the images 86 are configured to appear as though they areon a visual plane with the two central images appearing in theforeground, and the remaining images at the secondary positions driftinginto the background (looks like they are behind and transitioning to avanishing point from the images in the front positions). This effect maybe achieved by reducing the size of the images 86 when they are in thesecondary positions and further making the images 86 become smaller andsmaller the further the images are from the two front positions.

When following these rules, a worms eye view (the visual angle of theviewer being low) can be created when the primary position is at thehighest point on the path, and a birds eye view (the visual angle of theviewer being raised) can be created when the primary position is at thelowest point on the path (as shown). The depth of view in either theworms eye view or birds eye view can be adjusted by altering the heightof the oval path. A larger depth of view will be created with an ovalpath having a larger height, and a smaller depth of view will be createdwith an oval path having a short height.

During operation, the images 86 are configured to move along the linefrom one preset position to the next preset position. For example, whena navigation command is received, the images 86 are all moved over oneposition. That is, they move as a group along the line and stop whenthey all have shifted to the next preset position. If the navigationcommand is a left command, the images 86 typically rotate around theline in a counter clockwise motion. If the navigation command is a rightcommand, the images 86 typically rotate around the line in a clockwisemotion.

Additional details regarding moving images around a viewing area can befound in U.S. patent application Ser. No. 11/249,139, filed Oct. 11,2005, titled “MULTIMEDIA CONTROL CENTER”, which is herein incorporatedby reference.

FIG. 9 is a method 100 of operating an image based browser window at aportable electronic device, in accordance with one embodiment of thepresent invention. The method 100 begins at block 102 where an imagebased browser window is presented. For example, images are obtained froma database or data store and presented in a predetermined format. Theimage based browser window may present images using any of the imagebased browser windows described herein.

Following block 102, a determination is made at block 104 as to whetheror not a selection has been made. The selection may for example beaccomplished by using the select button of the circular inputarrangement shown in FIG. 2 or by tapping on the image using the touchscreen shown in FIG. 3. If the desired image has been selected, then themethod 100 proceeds to block 106 where an action associated with theimage is performed. This may for example include opening a menu, playinga media file, launching an application, initiating a mode, enlarging animage, initiating a phone call, opening another browser, and/or thelike.

In one example, if the browse window is displaying album art, thenselecting a particular album can cause display of a list (e.g., in amenu window) of the songs associated with the album. Alternatively oradditionally, selecting an album may initiate a playing sequencestarting at the first track of the album.

In another example, if the browse window is displaying movie art, thenselecting a particular movie art initiates the playback of the videofile associated with the image. Alternatively or additionally, selectinga movie image may open a menu window associated with the movie.

In another example, if the browse window is displaying mode based icons,then selecting a particular mode icon initiates a modal change of theportable electronic device, i.e., the portable electronic device changesto the selected mode. By way of example, the modes may include phonemode, music player mode, microphone recorder mode, camera mode, gameplayer mode, video player mode, email mode, and the like.

In another example, if the browse window is displaying a picture basedphone or address book, then selecting a particular picture may provideselectable contact information for the person pictured and/or mayinitiate a phone call to the person pictured.

In another example, if the browse window is displaying thumbnail picturefrom a picture library, then selecting a particular thumbnail picturecan enlarge the picture for viewing.

In another example, if the browse window is displaying a date book, thenselecting a month may open a new browse window associated with days ofthe month, and then selecting a particular day may open up a new browsewindow associated with the hours in the day, and selecting a particularhours opens up an entry window for entering events.

In yet another example, if the browse window is displaying a key pad,then selecting a particular character causes that character to beentered as for example in a text or numeric box. This example may beused to make phone calls or to enter text.

In yet another embodiment, if the browse window is displaying a group ofapplications in the form of icons, then selecting an icon can launch theapplication associated with the icon.

In yet another embodiment, if the browse window is displaying a documentimage, then selection of the document image may load a documentassociated with the document image in addition to an applicationassociated with the document image.

In yet another embodiment, if the browse window is displaying a websiteimage, then selection of the website image may display a webpage formthe website associated with the website image.

The browse window can also display more than one items. For example, thebrowse window may be configured as a finder and thus any data containedwithin the finder area can be presented through use of images. Forexample, the browse window may include images of contacts, documents,pictures, movies, and the like.

If an image has not been selected, then the method proceeds to block 108where a determination is made as to whether or not a navigation commandhas been made. The navigation command may be generated by a rotationaluser input or a linear user input. In the case of a rotational userinput, the rotational input may be created when a dial is rotated or afinger is swirled around a touch surface such as a touch pad, touchscreen or touch sensing housing. In the case of a linear user input, thelinear input may be created when a finger is slid across a touch pad,touch screen or touch sensing housing or possibly by translating amechanical slider or rotating a mouse scroll wheel.

If a navigation command has been generated, then the method 100 proceedsto block 110 where the images are transitioned through in accordancewith the navigation command. In the context of a rotational input, theimages may be moved left when a counter clockwise rotational input ismade, and the images may be moved right when a clockwise rotationalinput is made (or vice versa). In the context of a linear input, theimages may be moved left, when a right linear input is made, and theimages may be moved right when a left linear input is made (or viceversa).

Since the group of images can be rather lengthy, the invention providesthe ability for the user to rapidly traverse (or scroll) through thegroup of images by moving his or her finger at greater speeds (thefaster the input, the faster the traversal through the images).Moreover, in one embodiment, a user can traverse the group of images inan accelerated manner, such as by accelerating through the group ofimages whereby some of the images are skipped and thus not displayed.

If a navigation command has not been generated, then the method proceedsto block 112 where a determination is made as to whether or not a closecommand has been received. If not, the method proceeds back to block102. If so, the method proceeds to block 114 where the image basedbrowser window is removed (closed). In some cases, the display revertsback to the previous window. In other cases, the display presents a newwindow associated with the closing command.

In one embodiment, there is a dedicated menu item that opens the imagebased browser window. That is, the selecting the menu item takes theelectronic device directly to the image based browser.

FIG. 10 is a diagrammatic illustration of a menu hierarchy 120, whichuses a dedicated menu item to open an image based browser window. Theillustration is associated with a media player, although the concept maybe applied to other electronic devices. In this example, a Music item isselected in a main menu 121. Thereafter, an Album art item is selectedin a sub menu 122, which launches an image based browser window 123. Theimages used in the image based browser window 123 are images related toalbum art. Once an Album image is selected in the image based browser123, an album content menu 124 for the selected album is opened. Forexample, all the audio tracks associated with the album can be displayedin list format. Alternatively, the list of selectable audio tracks maybe presented at the primary position of the image browser. In oneimplementation, they may transition into the primary position over thealbum art (e.g., fade in/out, slide in/out, etc.). In anotherimplementation, the image may flip over in order to present theselectable audio tracks (make it appears as if audio tracks are on backside of album art). This may be analogous to flipping a physical album.Once an audio track is selected, a now playing window 125 is typicallyopened. Alternatively, once the album is selected, the method mayproceed to the now playing window where the first track is played andthereafter the remaining tracks of the album are played (e.g., may skipmenu 124).

In another embodiment, a browse mode is selected to adjust how menuitems are displayed. In a first mode, they are displayed in aconventional list. In a second mode, they are displayed using an imagebased browser window. By way of example, a user may need to select asetting menu and choose the mode. In most cases, the second mode is onlyapplied to appropriate menu items. Some menu items are best traversedusing the conventional list rather than images. The image based browsermay be used for media items such as album and movie titles.

FIG. 11 is a diagrammatic illustration of a menu hierarchy 130, whichuses a setting menu to set the display mode. The illustration isassociated with a media player, although the concept may be applied toother electronic devices. In this example, a Videos item is selected ina main menu 131. Thereafter, the Video settings item is selected in avideo menu 132, which opens a menu of video settings 133. At least oneof the menu items in the video settings window 133 is a Browse mode thatwhen selected provides browse choices as for example between list and/orimage in a Browse mode window 134. If Image is selected, the image modeis applied to appropriate menu items. These may for example include anymenu item even those dedicated to various sort criteria (e.g., artist,genre, etc.). In the illustrated example, the user thereafter can goback to the main menu 131 and selects Videos, and in the video menu 132selects Movies. Once selected, an image based browser window 135 thatdisplays the movies using poster art is presented. Once an image isselected, the movie associated with the image begins playing (as shown)or alternatively a movie or now playing menu 136 is opened.

Although FIGS. 10 and 11 have been directed at media player modes, itshould be appreciated that this is not a limitation and that the imagebased browser may be applied to other features of the electronic device.Various embodiments are shown by way of example below.

FIGS. 12A and 12B shows an image based browser 140 when the portableelectronic device is in a phone or communication mode. As shown, theimages 142 of the image based browser 140 are pictures that representindividuals whose contact information is stored in an address book. Theuser is thus able traverse through pictures rather than lists to findthe desired individual who they wish to contact. If the user doesn'thave a picture for the individual then they can assign some other imageto the individual. Alternatively or additionally, text may be includedin the image. For example, the text may be the individual's name. In oneembodiment, when the user selects the image 142 at the primary position,then contact information 144 associated with the image 142 is opened.The contact information 144 may be associated with a new window, oralternatively it may be presented at the primary position as shown inFIG. 12B. The contact information 144 may include selectable data suchas email and/or various phone numbers 146. The data may also includetext messaging. When email is selected then a mail window is opened withthe email address already entered. When a phone number is selected, thenthe portable electronic device initiates a call to that number. Asshould be appreciated, each individual may have a plurality of emailaddresses and phone numbers. Alternatively or additionally, when theuser selects the image 142 at the primary position, a default phonenumber associated with the image may be used to immediately initiate aphone call. The default may depend on mode. For example, if in emailmode then default can be email, if phone is opened then default can bephone.

FIG. 13 shows an image based browser 150 associated with applications.As shown, the images 152 are icons that represent applications that canbe launched on the electronic device. The user is thus able traversethrough icons rather than lists to find the desired application theywish to open. In one embodiment, when the user selects the icon 152 atthe primary position, the application is launched. By way of example,the application may be a photo management program, a music managementprogram, a video management program, word processing program,spreadsheet program, drawing program, and the like.

FIG. 14A-14D shows an image based browser 160 associated with a datebook or calendar. In this embodiment, the image based browser 160includes hierarchal browsers 161, 162, 163 and 164. FIG. 14A shows thefirst of the hierarchal browsers 161. In this first browser 161, theimages 165 are associated with months of the year. The images 165 mayinclude picture relating to the months and/or text that identifies themonths. For example, the image for February may include a red heartrepresenting Valentines Day and a “February” identifier. Alternativelyor additionally, pictures of people whose birthdays are in each monthmay be displayed. A single picture may be assigned or alternatively themultiple pictures of people with birthdays in the month may besequentially displayed (cycled through). This data may be pulled from anaddress book that includes birthdays and pictures. As shown in FIG. 14B,when the user selects a particular month, the second of the hierarchalbrowsers 162 is opened. In the second browser 162, the images 166 areassociated with days of the month. The images 166 may include picturerelating to the days and/or text that identifies the days. For example,a red heart representing Valentines Day and a “February” identifier maybe used for the 14^(th) of February. Alternatively or additionally,pictures of people whose birthdays are on a particular day may bedisplayed. As shown in FIG. 14C, when the user selects a particular day,the third of the hierarchal browsers 163 is opened. In the third browser163, the images 167 are associated with hours in the day. As shown inFIG. 14D, when the user selects a particular hour, a data entry window164 is opened that allows the user to enter text associated with theselected hour/day/month. For example, the window 164 may include one ormore data entry boxes 168. The user can therefore schedule events. Onceentered, the data is retained for future processing.

FIG. 15 shows an image based browser 170 associated with a photo viewingapplication. As shown, the images 172 are photos that are managed by aphoto management application. The photos 172 may be photos that havebeen downloaded to a portable electronic device and/or photos that havebeen taken with the portable electronic device. When selected, the photo172 may be presented in a full view within the display rather than asmall thumbnail.

FIG. 16 shows an image based browser 180 associated with modes of theportable electronic device. As shown, images 182 are icons thatrepresent different modes of the portable electronic device. The user isthus able traverse through icons to change modes of the device. When theuser selects the icon, the mode of the portable electronic device ischanged to that mode. By way of example, moving left to right, the modesmay include email, video player, music player, game, phone, microphone,camera, game player and/or the like. It should be appreciated that thisbrowser may be hierarchal with other browsers. For example, if the phonemode is selected then the browser shown in FIGS. 12A and 12B may bedisplayed. Alternatively, if the music player mode is selected, then thebrowser shown in FIG. 10 may be displayed.

FIG. 17A-17B show an image based browser 190 associated with enteringdata into the portable electronic device. In both of these figuresimages 192 are assigned various characters. As shown in FIG. 17A, theimages 192A are assigned numbers. When a number is selected, it isentered into a data entry box 194. As shown in FIG. 17B, the images 192Bare assigned letters. When a letter is selected, it is entered into adata entry box 194. Of course, numbers and letters may be included inthe same image based browser. Furthermore, other symbols may be useddepending on the needs of the portable electronic device. For example,the images 192 may be assigned symbols associated with a standard phone,i.e., 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, *, # so that calls and callerfunctions can be performed.

FIG. 18 is a browsing method 200, in accordance with one embodiment ofthe present invention. The method 200 may for example be implemented ona portable electronic device such as any of those described herein. Theportable electronic device generally includes a user interface, whichcan be located at any number of locations about the portable electronicdevice. In most cases, however, the front surface provides the mainsurface for implementing the user interface. The user interfacegenerally includes a display device and one or more input devices. Theinput devices may be widely varied. In one embodiment, the input devicesinclude at least a proximity or touch sensing device for sensing objectsabove a sensing surface. Proximity sensing and touch sensing has manyadvantages over other types of input means.

The method 200 generally begins at block 202 where an image basedbrowser window is displayed within the display region. The image basedbrowser is configured to present at least a portion of images from agroup of images. The images may be presented in a primary or highlightedposition as well as one or more secondary positions at locationsproximate to the primary position (e.g., left, right, top, bottom,etc.). The primary position generally means that the image is capable ofbeing selected. By way of example, the image based browser may be any ofthose described herein.

Following block 202, the method 200 proceeds to block 204 where anobject is detected over a sensing surface. The object may for example bethe user's finger, and the sensing surface may be associated with atouch sensing device such as a touch pad, touch screen or touchsensitive housing.

Following block 204, the method 200 proceeds to block 206 where anavigation input is recognized based on an object action. The objectaction may be associated with a linear user input such as for examplewhen a user translates their finger across the sensing surface (e.g.,vertical, horizontal, diagonal). The object action may be associatedwith a rotational user input such as for example when a user swirlstheir finger about the sensing surface using a circular motion. Ofcourse other object actions may be used.

In some cases, the object action can be recognized at any location overthe sensing surface. In other cases, the object action can only berecognized at predetermined areas, i.e., at specific locations of thesensing surface such as directly over image or next to image or both.Many aspects of the object action may be utilized to create thenavigation input including but not limited to number of objects,location, speed, direction, length of action, etc.

Following block 106, the method proceeds to block 108 where the imagesof the image based browser are transitioned through in accordance withthe navigation input. The transitioning may for example be based on thenumber of objects, location, speed, direction, and length of the objectaction. Generally speaking, transitioning includes sequentiallyadvancing images in and out of viewing area and through secondary andprimary positions. The advancing may be proportional to the speed of theuser's swirling, sliding or swiping action relative to the sensingsurface.

Several examples of object actions used to create navigation inputs 210for an image based browser 212 are shown in FIGS. 19A-19G. Thenavigation inputs 210 are designed to move images along a predeterminedpath. In the illustrated examples, the path is a horizontal axis. Thus,the navigation inputs 210 are designed to move the images linearly alongthe horizontal axis. The images may be sequentially advanced along thepath from one group to a second group (e.g., primary, secondary).

FIGS. 19A-19C illustrate an electronic device with a touch screendisplay. In one embodiment, as shown in FIG. 19A, a substantiallyhorizontal swipe 214 across the touch screen display or a substantiallyhorizontal slide 214 along the surface of the touch screen displaycreates the navigational input. In one implementation of thisembodiment, the substantially horizontal swipe/slide 214 can be madeanywhere within the touch sensing area of the touch screen. In anotherimplementation of this embodiment, the substantially horizontalswipe/slide 214 has to be made in a particular area of the touch sensingarea of the touch screen as for example, in the area below an imagebased browser 212 or alternatively over the images of the image basedbrowser 212.

In another embodiment, as shown in FIG. 19B, an arc or rotational slide216 creates the navigational input. Like the substantially horizontalswipe/slide 214, the arc or rotation 216 may be required to made in aspecific area or at any location within the touch sensing area of thetouch screen.

In most cases, the speed of the slide determines the speed of traversal.Furthermore, the direction of the slide determines the direction oftraversal. Moreover, the length of the slide can determine the number ofimages being traversed. In addition, the number of fingers used can beused for speed of traversal (one finger=normal, two finger=accelerated),or number of images being traversed (one finger=normal, two finger=2×).

In yet another embodiment, as shown in FIG. 19C, a press and hold 218creates the navigational input. In most cases, the length of the holddetermines the speed at which images are transition through (the longerthe hold, the greater the speed) while the location of the pressdetermines the direction of the transition. For example, pressing on theleft side of the primary image causes the images to transition to theleft while pressing on the right side of the primary image cause theimages to transition to the right (or vice versa). Alternatively oradditionally, a single or multiple taps may be used to createnavigational inputs. By way of example, a single tap may initiate asingle image transition where images move one position to right or leftdepending on where the tap takes place. Multiple taps can be used totransition through images one by one. For example, two taps causes theimages to move over two spots, three taps causes the images to move overthree spots, and so on.

FIGS. 19D and 19E illustrate a portable electronic device with a touchpad. FIG. 19D includes a circular touch pad while FIG. 19E includessquare or rectangular touch pad. In one embodiment, a substantiallyhorizontal swipe/slide 214 across the touch pad creates the navigationalinput (or vertical). In another embodiment, an arc or rotational slide216 about the touch pad creates the navigational input.

FIG. 19F illustrates a portable electronic device with a touch sensitivehousing. The touch sensitive housing is located in the bezel region thatsurrounds the edges of the display. As such, the bezel region mayinclude a horizontal and vertical sensing component below or on thesides of the display. In the illustrated embodiment, a substantiallyhorizontal swipe/slide 214 on the lower bezel underneath the image basedbrowser 212 creates the navigational input 210. In addition, in caseswhere the housing is more of an extended surface rather than an edge,navigation inputs 210 can be created similarly to that described incontext of the touch screen and touch pads shown in FIGS. 19A-19E.

FIGS. 19G and 19H illustrate a portable electronic device with a touchscreen. In this embodiment, the display is configured to display virtualnavigation elements or user interface elements including for example avirtual touch region similar to FIG. 19D or 19E (as shown in FIG. 19G)and/or a virtual mechanism such as a dial or slider or scroll bar (asshown in FIG. 19H). In one embodiment, a substantially horizontalswipe/slide 214 across the virtual mechanism creates the navigationalinput. In another embodiment, an arc or rotational slide 216 about thevirtual mechanism creates the navigational input.

With regards to FIG. 19A-19H, it should be noted that horizontal linearslides are not limitation and that vertical slides may also be used. Inmost cases, however, the direction of the slide is configured tocoincide with the layout of the browser. In the instant case, thebrowser has a horizontal layout and thus a horizontal linear slide ispreferred. In other cases, a vertical slide can be used to createhorizontal movement.

Also in regards to FIGS. 19A-19H, it should also be noted that utilizingtouch devices is not limitation and that mechanical means may also beused. For example, dials, scroll wheels and mechanical sliders may beused. Although it should be appreciated that these solutions aretypically not as elegant as touch devices and can create more complexityin how the portable electronic device is assembled.

FIG. 20 is a browsing selection method 250, in accordance with oneembodiment of the present invention. The method 250 may for example beimplemented on a portable electronic device such as any of thosedescribed herein. The portable electronic device generally includes auser interface, which can be located at any number of locations aboutthe portable electronic device. In most cases, however, the frontsurface provides the main surface for implementing the user interface.The user interface generally includes a display device and one or moreinput devices. The input devices may be widely varied. In oneembodiment, the input devices include at least a proximity or touchsensing device for sensing objects above a sensing surface. Proximitysensing and touch sensing has many advantages over other types of inputmeans.

The method 250 generally begins at block 252 where an image basedbrowser window is displayed within a display region of the displaydevice. The image based browser is configured to present at least aportion of images from a group of images. The images may be presented ina primary or highlighted position as well as one or more secondarypositions at locations proximate to the primary position (e.g., left,right, top, bottom, etc.). The primary position generally means that theimage is capable of being selected. By way of example, the image basedbrowser may be any of those described herein.

Following block 252, the method 250 proceeds to block 254 where anobject is detected over a sensing surface. The object may for example bethe user's finger, and the sensing surface may be associated with atouch sensing device such as a touch pad, touch screen or touchsensitive housing.

Following block 254, the method 250 proceeds to block 256 where aselection input is recognized based on an object action. The objectaction may be a tap, a linear input, a rotational input, and/or thelike. Of course other object actions may be used. In some cases, theobject action can be recognized at any location over the sensingsurface. In other cases, the object action can only be recognized atpredetermined areas, i.e., at specific locations of the sensing surface.Many aspects of the object action may be utilized to create thenavigation input including but not limited to number of objects,location, speed, direction, length of action, etc.

Following block 256, the method proceeds to block 258 where an actionassociated with the selected image is initiated. As should beappreciated, there is an action assigned to the image so that when theimage is selected the assigned action takes place. The action may bewidely varied. By way of example, the action may be related to launchingan application, changing modes, opening a new window, playing media,initiating a communication, etc.

The action generally depends on the type of browser (or browsing). Forexample, if the browser is an album based browser, then the action maygenerally correspond to presenting a menu list of songs associated withthe album. If the browser is an address based browser, then the actionmay generally correspond to presenting contact information and/orpossibly automatically performing a contact action such as making aphone call or initiating an email. If the browser is a date bookbrowser, then the action may generally correspond to presenting a datewindow capable of text entries. If the browser is a mode based browser,then the action may initiate a modal change, i.e., the mode in theprimary position can be initiated. If the browser is a photo basedbrowser, then a large window with the selected image may be opened. Ifthe browser is an application based browser, then the selectedapplication can be launched. If the browser is configured for dataentry, then the data associated with the image can be entered. If thedocument is configured to present documents, the document associatedwith the image and possibly the application associated with the documentmay be opened.

Several examples of object actions used to create selection inputs foran image based browser are shown in FIGS. 21A-21F. The selection inputs270 are designed to select highlighted images at a primary position. Inthe illustrated examples, the image 272 for selection is located at aprimary position of the image based browser 274.

FIGS. 21A-21B illustrates a portable electronic device with a touchscreen display. In one embodiment, as shown in FIG. 21A, a press, tap ormultiple taps 278 creates the section input. In another embodiment, asshown in FIG. 21B, a substantially vertical swipe 276 across the touchscreen or a substantially vertical slide 276 along the touch screencreates the selection input. In one implementation, the substantiallyvertical swipe/slide 276, press or tap 278 can be made anywhere withinthe touch sensing area of the touch screen. In another implementation,the substantially vertical swipe/slide 276, press or tap 278 has to bemade in a particular area of the touch sensing area of the touch screenas for example, in an area next to the image based browser 274 oralternatively over the image browser 274 itself. In one case, thevertical slide or tap 276 or 278 must be made over the image in theprimary position.

FIGS. 21C and 21D illustrate a portable electronic device with a touchpad. FIG. 21C includes a circular touch pad with a central buttonregion, which can be a mechanical button or a touch sensitive buttonwhile FIG. 21D includes square or rectangular touch pad. In oneembodiment, a button press 278 at the button region creates theselection input (FIG. 21C). In another embodiment, a press, tap or thesubstantially vertical swipe/slide 276 creates the selection input (FIG.21D).

FIG. 21E illustrates a portable electronic device with a touch sensitivehousing. The touch sensitive housing is located in a bezel region 277that surrounds the display. As such, the bezel region 277 may include ahorizontal and vertical sensing component below or on the sides of thedisplay. In the illustrated embodiment, the substantially verticalswipe/slide 276 on the side bezel next to the image based browser 274creates the selection input. In addition, in cases where the housing ismore of an extended surface, selection inputs can be created similarlyto that described in context of the touch screen and touch pads shown inFIGS. 21A-21D.

FIG. 21F illustrates a portable electronic device with a touch screen.In this embodiment, the display is configured to present virtualmechanisms or user interface elements that receive touch inputs. In oneexample, as shown in FIG. 21F, the virtual mechanism is a virtual touchregion 279 and button region similar to FIG. 21C. In this example, aselection input is created when the button region is tapped.

FIG. 22 is a browser method 300, in accordance with one embodiment ofthe present invention. The browser method may for example be acombination of the previous two methods.

The method 300 generally begins at block 302 where an image basedbrowser window is displayed within the display region. The image basedbrowser is configured to present at least a portion of images from agroup of images. The images may be presented in a primary or highlightedposition as well as one or more secondary positions at locationsproximate to the primary position (e.g., left, right, top, bottom,etc.). The primary position generally means that the image is capable ofbeing selected. By way of example, the image based browser may be any ofthose described herein.

Following block 302, the method 300 proceeds to block 304 where anobject is detected over a sensing surface. The object may for example bethe user's finger. By way of example, the sensing surface may beembodied as touch pads, touch screens, and/or touch sensitive housings.Alternatively or additionally, the sensing surface may be embodied asproximity regions above a surface such as proximity sensing pads,proximity sensing screens and/or proximity sensing housings.

Following block 304, the method 300 proceeds to block 306 where adetermination is made as to whether or not a navigation input isreceived.

If navigation input is received, the method 300 proceeds to block 308where the images of the image based browser are transitioned through inaccordance with the navigation input. The transitioning may for examplebe based on the number of objects, location, speed, direction, andlength of the object action. Generally speaking, transitioning includessequentially advancing images in and out of viewing area and throughsecondary and primary positions. The advancing may be proportional tothe speed of the users swirling, sliding or swiping action relative tothe sensing surface.

If no navigation input is recognized, the method 300 proceeds to block310 where a determination is made as to whether or not a selection inputis received. If no selection input is received, then the method 300proceeds back to block 306. If a selection input is received, the method300 proceeds to block 312 where selectable data associated with theprimary or highlighted image is presented. The selectable data may forexample be presented in a vertical menu list format.

Thereafter, the method 300 proceeds to block 314 where a determinationis made as to whether or not any of the selectable data items areselected. If not, then the method proceeds to block 316, which may be astandby block, or time out block. If standby, then the method 300 waitsfor a selection to be made, i.e., the menu list is presented until aselection is made. If time out, then the method 300 proceeds back todisplaying the image browser (block 302). Generally, the display revertsback to last browser setting before a selection input was made.

If it is determined at block 314 that a selectable data item isselected, then the method 300 proceeds to block 318 where an actionassociated with the selectable item is initiated.

In one embodiment, the size of the area designated to receive swipes isdivided in increments with each increment representing an image. Thus,the user is able to gauge where they would like to browse. In mostcases, the area is incremented according to the number of images.

Depending on the number of images in the browser, one or multiple swipesmay be necessary to browse the entire set of images.

FIGS. 23A-23H illustrate an exemplary browsing sequence using themethods described above. The browsing sequence is performed on aportable electronic device having a touch screen disposed over a displayregion of the portable electronic device.

As shown in FIG. 23A, the portable electronic device displays an imagedbased browser in a display region of the portable electronic device. Inthis example, the imaged based browser is configured to present albumimages associated with audio tracks or songs stored on the portableelectronic device (each song has an album image assigned thereto).

As shown in FIG. 23B, the user swipes their finger over the displayregion. In some cases, the swipe may be dependent on location within thedisplay region while in other cases the swipe may be made at anylocation within the display region. In the illustrated embodiment, theswipe is performed in the area underneath the displayed image browser.This allows a user to view the image browser while making a swipe. Ofcourse other areas are possible as for example swiping over the browser.This has the advantage of simulating flipping through an actual bin ofalbums.

As shown in FIG. 23C, the portable electronic device recognizes theswipe and moves the images accordingly. By way of example, the length ofthe swipe, the speed of the swipe and the direction of the swipe are afew factors from many possible factors controlling the number of imagesthat are cycled through for a given swipe. In the illustratedembodiment, the user is swiping left which causes the images to moveleft (this is similar to flipping through a bin of albums). Of course,the images may also be moved opposite the direction of the finger swipe.In most cases, the movement of the images happens simultaneously withthe swipe of the finger.

As shown in FIG. 23D, the user taps or presses their finger over theimage at the primary position. Alternatively, the user may verticallyswipe at the image at the primary position.

As shown in FIG. 23E, the portable electronic device recognizes the tapor press or vertical swipe and presents a list of songs associated withthe album at the primary position. Each of the songs in the list ofsongs is selectable. In some cases, this is an entirely new window(e.g., menu window). In other cases, the list is part of or related tothe image. For example, the list may be overlaid on top of the image orover a new image related to the album art (e.g., back of the album). Inone embodiment, the image is configured to rotate about a horizontalaxis thereby making it appear as if you are seeing the back of the imagewhich contains the list. The direction of rotation may be related to thedirection of the vertical swipe if a vertical swipe is used therebymaking it appear as if the user is flipping the image around. Inaddition, the list of songs as well as the image may be enlarged ascompared to the original image size to make viewing and selectionseasier. By way of example, a transition effect that makes the image andlist appear to grow may be used. At the same time, the secondary imagesmay be made smaller or shrunk as the image list grows in size (or theymay simply disappear). In some cases, every song in the list may beshown while in other cases only a portion of the list may be shown.

In FIG. 23F, the user can navigate through the list of songs. This mayfor example be accomplished with a vertical swipe that initiatesvertical scrolling. This may also be accomplished with a highlight barthat moves with the finger as it moves up and down through the list,e.g., the highlight bar highlights the song proximate the finger (asshown).

As shown in FIG. 23F, a vertical slide can move a highlight bar throughthe list.

As shown in FIG. 23G, the user performs a selection event by pressing ortapping their finger as for example over the desired song.

As shown in FIG. 23H, the portable electronic device recognizes theselection event and starts playing the song. The portable electronicdevice may also open a play window (as shown).

FIGS. 24A-24H illustrate an exemplary browsing sequence using themethods described above. The browsing sequence is performed on aportable electronic device having a display region and a separate touchpad region and button region. This can be implemented physically orvirtually.

As shown in FIG. 24A, the portable electronic device displays an imagedbased browser in a display region of the portable electronic device. Theimaged based browser is configured to present contact images associatedwith an address book stored on the portable electronic device (eachcontact has an image assigned thereto). By way of example, the contactimages may be photos of individuals in the address book.

As shown in FIG. 24B, the user swipes their finger over the touch padregion.

As shown in FIG. 24C, the portable electronic device recognizes theswipe and moves the images accordingly. By way of example, the length ofthe swipe, the speed of the swipe and the direction of the swipe are afew factors from many possible factors controlling the number of imagesthat are cycled through for a given swipe. In the illustratedembodiment, the user is swiping counter clockwise which causes theimages to move left. Of course, the images may also be moved oppositethe direction of the finger swipe. In most cases, the movement of theimages happens simultaneously with the swipe of the finger.

As shown in FIG. 24D, once a desired image is placed at the primaryposition, the user taps or presses their finger over the button region.Alternatively, the user may press or tap the touch pad region (singletap, double taps, etc.).

As shown in FIG. 24E, the portable electronic device recognizes the tapor press and presents contact information associated with the contactimage. The contact information may include address, family members,phone numbers, email addresses. In some cases, this data may beselectable data as for example phone numbers and email addresses. Insome cases, this is an entirely new window (e.g., menu window). In othercases, the contact information is part of or related to the contactimage. In one embodiment, the contact image is configured to rotateabout a horizontal axis thereby making it appear as if you are seeingthe back of the contact image which contains the list. The direction ofrotation may be related to the direction of the vertical swipe if avertical swipe is used thereby making it appear as if the user isflipping the image around. In addition, the contact information may beenlarged as compared to the original image size to make viewing andselections easier. By way of example, a transition effect that makes thecontact information appear to grow may be used. At the same time, thesecondary images may be made smaller or shrunk as the image list growsin size (or they may simply disappear). In some cases, all the contactinformation is shown while in other cases only a portion of the contactinformation is shown.

As shown in FIG. 24F, the user navigates through the contactinformation. This may for example be accomplished with a vertical swipethat initiates vertical scrolling when the amount of data is larger thanwhat is being displayed.

As shown in FIG. 24G, the user performs a selection event by pressing ortapping their finger as for example over a selectable data item such asa phone number.

As shown in FIG. 24H, the portable electronic device recognizes theselection event and can initiate a phone call. The portable electronicdevice may also revert back to the contact image so that the user knowswho they are calling.

FIG. 25 is a selection method 350, in accordance with one embodiment ofthe present invention. The method 350 generally begins at block 352where an image based browser window is displayed within the displayregion. The image based browser is configured to present at least aportion of images from a group of images. The images may be presented ina primary or highlighted position as well as one or more secondarypositions at locations proximate to the primary position (e.g., left,right, top, bottom, etc.). The primary position generally means that theimage is capable of being selected. By way of example, the image basedbrowser may be any of those described herein.

In this embodiment, there is a rear image that is associated with thefront image. The front image is presented when the browser istransitioning through elements. The rear image is presented when thefront image is selected. The rear image may for example includeselectable data associated with the front image.

Following block 352, the method proceeds to block 354 where a selectioninput event is detected. In one embodiment, the selection input event isa tap or press. In another embodiment, the selection input event is avertical swipe event. Although not a requirement, in most cases, for theselection event to be recognized, the selection event must occur overthe image in the primary position.

Following block 354, the method proceeds to block 356 where the frontand rear images are flipped when the selection input event is detected.For example, if the front image is being displayed, and a selectioninput event is detected, then the front image is removed from view whilethe rear image is presented for view. Conversely, if the rear image isbeing displayed, and a selection event is detected, then the rear imageis removed from view while the front image is presented for view. In oneembodiment, the flip is as simple as inserting or replacing images atthe same location. In another embodiment, the image is configured toappear as if its rotating about a horizontal axis. In this embodiment,the image rotates from front to back and back to front about thehorizontal axis. In some cases, this may include skewing the images asit rotates to make it appear as if its moving between foreground andbackground (e.g., leading edge becomes bigger while trailing edgebecomes smaller). Essentially this effect is configured to mimicspinning a 2D flat planar object so that different sides of the objectcan be seen.

FIGS. 26A-26E illustrate a flipping sequence for use in the embodimentmentioned above. As shown in FIG. 26A, the user places their finger overthe image to be flipped (e.g., primary image). As shown in 26B-26D, theuser slides their finger in a vertical direction. The slide can beeither up or down.

As shown in FIG. 26B, the edge of the image at the beginning of theslide follows the finger as it moves vertically. In this case, thefinger is slid downward and thus the top edge of the element follows thefinger. Furthermore, a first portion of the element above a horizontalaxis is configured to enlarge while a second portion of the elementbelow the horizontal axis configured to shrink. In addition, the elementis configured to be skewed during motion to make it appears as if thefirst portion is being brought to the foreground and the second portionis being moved to the background. For example, the top edge of the firstportion is skewed horizontally outward from the horizontal axis whilethe bottom edge of the bottom portion is skewed horizontally inward fromthe horizontal axis.

As shown in FIG. 26C, this effect continues until the top and bottomedges of the image are aligned with the horizontal axis. The imageeither disappears or a small line segment is displayed.

As shown in FIG. 26D, the edge of the image continues to follow thefinger as it moves vertically. The first portion begins to move belowthe horizontal axis and the second portion moves above the horizontalaxis. The first portion remains enlarged and skewed outwardly but in areverse orientation while the second portion remains smaller and skewedinwardly but in a reverse orientation.

The contents on the image may also be skewed as for example fromforeground to background.

As shown in FIG. 26E, at the end of the slide, the rear image is broughtinto view to its original size and without any skewing (original state).In some cases, however, the rear image may be made gradually largerduring the flip especially if it contains selectable data or data thatis hard to see.

It should be noted that the invention is not limited to front and rearimages, and that more than two images at the primary position can beflipped through.

FIG. 27 is a browsing method 400, in accordance with one embodiment ofthe present invention. The method 400 generally begins at block 402where an image based browser window is displayed within a displayregion. The image based browser is configured to present at least aportion of images from a group of images. The images may be presented ina primary or highlighted position as well as one or more secondarypositions at locations proximate to the primary position (e.g., left,right, top, bottom, etc.). In the illustrated embodiment, the browserincludes a plurality of secondary images on both the left and rightsides of the primary image. The primary position generally means thatthe element is capable of being selected to initiate a new task oraction. By way of example, the image based browser may be any of thosedescribed herein.

Following block 402, the method proceeds to block 404 where a selectinput event is recognized over one of the secondary images. The selectinput may be a tap or press or may simply be the presence of an objectover the secondary image.

Following block 404, the method proceeds to block 406 where the imagesare transitioned through in order to place the selected secondary imagein the primary position. For example, as shown in FIGS. 28A and 28B,when the user places their finger over a secondary image two positionsto the left of the primary position, all the images are moved over twopositions to the right so that the selected secondary image is placed inthe primary position. The same can be done for the secondary images atthe left of the primary position.

FIG. 29 is a browsing method 420, in accordance with one embodiment ofthe present invention. The method 420 generally begins at block 422where an image based browser window is displayed within the displayregion. The image based browser is configured to present at least aportion of images from a group of images. The images may be presented ina primary or highlighted position as well as one or more secondarypositions at locations proximate to the primary position (e.g., left,right, top, bottom, etc.). The primary position generally means that theimage is capable of being selected to initiate a new task or action. Byway of example, the image based browser may be any of those describedherein. Each image has an alphabet letter tag associated therewith. Thealphabet letter tag may for example be based on the spelling of a titleassociated with the image. For example, in the case of an album, thealphabet letter tag is the album name. Furthermore, the images areconfigured in alphabetical order based on the alphabet letter tags(e.g., the images start with A1 and are horizontal positioned next toone another through Z(n)).

The method 420 also includes block 424 where letters of the alphabet aredisplayed in alphabetical order across the bottom of the display region.The method 420 also includes block 426 where an object is detected overthe a displayed letter. The method 420 also includes block 428 where theimages of the image browser are transitioned through in order place thefirst image associated with the letter in the primary position. See forexample FIGS. 30A and 30B, which show that if a user should move andplace their finger over and/or press the letter E, the imagesubsequently transition through the images so that the first E image isplaced in the primary position. In one embodiment, either the selectedletter is highlighted or a new letter designator is displayed when theletter is selected.

It should be appreciated that the invention is not limited toalphabetical order and that other criteria may be used including forexample genre, time, and the like.

FIG. 31 is a browse method 450, in accordance with one embodiment of thepresent invention. The method 450 includes block 452 where an imagebased browser is displayed. The image based browser includes a primaryposition and first and second secondary positions on first and secondsides of the primary image. The image based browser may for examplecorrespond to any of those described herein.

The method 450 also includes block 454 where an object is detected overthe images at the first or second secondary positions located at thesides of the primary position. The method 450 also includes block 456where the presence of an object over the secondary images is recognizedas a navigation input.

The method 450 further includes block 458 where the images aretransitioned through in accordance with the navigation input. Forexample, if the object is located on a first side, the images are movedin a first direction and if the object is located on the second side theimages are moved in a second direction that is opposite the firstdirection. By way of example, if the object is located on the left side,then the images are moved to the left and if the object is located onthe right, then the images are moved to the right. The number ofpositions the images move is generally dependent on the length of timethe object is detected. For example, one (1) second of detection may beequal to five (5) image transitions. Furthermore, quick tap may beconfigured to move one transition. In this manner, the user canincrementally transition through images by tapping. In cases where amulti touch sensing surface is provided, the invention may furtherprovide accelerated browsing based on the number of fingers presentduring a user action. For example, adding a second finger makes thetraversal 2× faster, adding a third finger makes the traversal 3× fasterand so on.

FIG. 32 is a method 500 of assigning an image to a list, in accordancewith one embodiment of the present invention. This method may beperformed at a host before downloading the list to the portableelectronic device, or alternatively it may be performed at the portableelectronic device.

The method 500 generally begins at block 502 where a file is created.The file may be a list of data items. The list may for example be aplaylist containing a portion of songs from a large song library. Theplaylist is somewhat of a sub menu so that a user does not have tobrowse through a large library. It also serves the purpose of organizingsongs into categories such as Dance Music or Mood Music, etc. It shouldbe appreciated, that the file is not limited to playlists and other datamay be contained in the file. For example, the file may be an addressfile containing contact information. Creating the file typicallyincludes providing a heading or title to the file.

Following block 502, the method 500 proceeds to block 504 where an imageis assigned to the file. The images may for example be selected from aphoto library, a pdf library, etc. This may for example be accomplishedby (1) selecting a file, (2) selecting Add Image in an operations menuso that a window that contains images is opened, (3) selecting an imagefrom the window and thereafter (4) assigning the image to the playlist.

Following block 504, the method proceeds to block 506 where the image isadded to an image browser. The file including the image would be placedin the image browser so that it would be included in any subsequentbrowsing experiences.

FIG. 33 is an operational method 550 for a portable electronic device,in accordance with one embodiment of the present invention. The portableelectronic device is capable of being used in multiple orientations. Byway of example, the portable electronic device may be utilized in aportrait mode or a landscape mode. In one embodiment, the portableelectronic device has a rectangularly shaped display region. By way ofexample, the display region may have a 16:9 or 4:3 configuration thatcorrespond with landscape and portrait modes. In addition, the displayregion may be configured to substantially fill the front surface of theportable electronic device.

The method 550 generally begins at block 552 where a first GUI and asecond GUI are provided. The first and second GUIs are based on the samedata but use different formatting schemes to show the data. In oneembodiment, the first GUI is configured as a vertical menu list that istext based and the second GUI is configured as an image browser that isimage based. The images in the image browser are associated withcorresponding text data in the menu. By way of example, the first GUImay be a vertical list of audio tracks while the second GUI may be ahorizontal arrangement of albums.

Following block 552, the method proceeds to block 554 where theorientation of the portable electronic device is determined. This mayfor example be accomplished with tilt sensors or accelerometers (amongothers). In one embodiment, the determination includes determiningwhether the portable electronic device is being utilized in a portraitmode or landscape mode.

If the portable electronic device is in a first orientation (portrait),the method 554 proceeds to block 556 where the first graphical userinterface (GUI) is presented.

If the portable electronic device is in a second orientation(landscape), the method proceeds to block 558 where the second graphicaluser interface (GUI) is presented.

In one embodiment, as shown in FIG. 34, a menu based window is presentedwhen the device is in portrait mode, and an image based browser ispresented when the device is in a landscape mode. As should beappreciated, portrait mode lends itself to vertical scrolling as forexample through a vertical menu list while landscape lends itself tohorizontal scrolling as for example through a horizontal image browser(more images can be viewed in landscape mode).

FIG. 35 is a block diagram of a media player 700 according to oneembodiment of the invention. The media player 700 includes a processor702 that pertains to a microprocessor or controller for controlling theoverall operation of the media player 700. The media player 700 storesmedia data pertaining to media items in a file system 704 and a cache706. The file system 704 is, typically, a storage disk or a plurality ofdisks. The file system 704 typically provides high capacity storagecapability for the media player 700. The file system 704 can store notonly media data but also non-media data (e.g., when operated in a diskmode). However, since the access time to the file system 704 isrelatively slow, the media player 700 can also include a cache 706. Thecache 706 is, for example, Random-Access Memory (RAM) provided bysemiconductor memory. The relative access time to the cache 706 issubstantially shorter than for the file system 1004. However, the cache706 does not have the large storage capacity of the file system 1004.Further, the file system 704, when active, consumes more power than doesthe cache 706. The power consumption is often a concern when the mediaplayer 700 is a portable media player that is powered by a battery (notshown). The media player 700 also includes a RAM 720 and a Read-OnlyMemory (ROM) 722. The ROM 722 can store programs, utilities or processesto be executed in a non-volatile manner. The RAM 720 provides volatiledata storage, such as for the cache 1006.

The media player 700 also includes a user input device 708 that allows auser of the media player 700 to interact with the media player 700. Forexample, the user input device 708 can take a variety of forms, such asa button, keypad, dial, etc. Still further, the media player 700includes a display 710 (screen display) that can be controlled by theprocessor 702 to display information to the user. A data bus 711 canfacilitate data transfer between at least the file system 704, the cache706, the processor 702, and the CODEC 712.

In one embodiment, the media player 700 serves to store a plurality ofmedia items (e.g., songs) in the file system 704. When a user desires tohave the media player play a particular media item, a list of availablemedia items is displayed on the display 710. Then, using the user inputdevice 708, a user can select one of the available media items. Theprocessor 702, upon receiving a selection of a particular media item,supplies the media data (e.g., audio file) for the particular media itemto a coder/decoder (CODEC) 712. The CODEC 712 then produces analogoutput signals for a speaker 714. The speaker 714 can be a speakerinternal to the media player 700 or external to the media player 700.For example, headphones or earphones that connect to the media player700 would be considered an external speaker.

The media player 700 also includes a network/bus interface 716 thatcouples to a data link 718. The data link 718 allows the media player700 to couple to a host computer. The data link 718 can be provided overa wired connection or a wireless connection. In the case of a wirelessconnection, the network/bus interface 716 can include a wirelesstransceiver.

In one implementation, the host computer can utilize an applicationresident on the host computer to permit utilization and providemanagement for playlists, including a media device playlist. One suchapplication is iTunes®, produced by Apple Inc. of Cupertino, Calif.

FIG. 36 is a block diagram of a media management system 800 according toone embodiment of the invention. The media management system 800includes a host computer 802 and a media player 804. The host computer802 is typically a personal computer. The host computer, among otherconventional components, includes a management module 806 which is asoftware module. The management module 806 provides for centralizedmanagement of media items (and/or playlists) not only on the hostcomputer 802 but also on the media player 804. More particularly, themanagement module 806 manages those media items stored in a media store808 associated with the host computer 802. The management module 806also interacts with a media database 810 to store media informationassociated with the media items stored in the media store 808.

The media information pertains to characteristics or attributes of themedia items. For example, in the case of audio or audiovisual media, themedia information can include one or more of: title, album, track,artist, composer and genre. These types of media information arespecific to particular media items. In addition, the media informationcan pertain to quality characteristics of the media items. Examples ofquality characteristics of media items can include one or more of: bitrate, sample rate, equalizer setting, volume adjustment, start/stop andtotal time.

Still further, the host computer 802 includes a play module 812. Theplay module 812 is a software module that can be utilized to playcertain media items stored in the media store 808. The play module 812can also display (on a display screen) or otherwise utilize mediainformation from the media database 810. Typically, the mediainformation of interest corresponds to the media items to be played bythe play module 812.

The host computer 802 also includes a communication module 814 thatcouples to a corresponding communication module 816 within the mediaplayer 804. A connection or link 818 removeably couples thecommunication modules 814 and 816. In one embodiment, the connection orlink 818 is a cable that provides a data bus, such as a FIREWIRE™ bus orUSB bus, which is well known in the art. In another embodiment, theconnection or link 818 is a wireless channel or connection through awireless network. Hence, depending on implementation, the communicationmodules 814 and 816 may communicate in a wired or wireless manner.

The media player 804 also includes a media store 820 that stores mediaitems within the media player 804. Optionally, the media store 820 canalso store data, i.e., non-media item storage. The media items beingstored to the media store 820 are typically received over the connectionor link 818 from the host computer 702. More particularly, themanagement module 806 sends all or certain of those media items residingon the media store 808 over the connection or link 818 to the mediastore 820 within the media player 804. Additionally, the correspondingmedia information for the media items that is also delivered to themedia player 804 from the host computer 802 can be stored in a mediadatabase 822. In this regard, certain media information from the mediadatabase 810 within the host computer 802 can be sent to the mediadatabase 822 within the media player 804 over the connection or link818. Still further, playlists identifying certain of the media items canalso be sent by the management module 806 over the connection or link818 to the media store 820 or the media database 822 within the mediaplayer 804.

Furthermore, the media player 804 includes a play module 824 thatcouples to the media store 820 and the media database 822. The playmodule 824 is a software module that can be utilized to play certainmedia items stored in the media store 820. The play module 824 can alsodisplay (on a display screen) or otherwise utilize media informationfrom the media database 822. Typically, the media information ofinterest corresponds to the media items to be played by the play module824.

Hence, in one embodiment, the media player 804 has limited or nocapability to manage media items on the media player 804. However, themanagement module 806 within the host computer 802 can indirectly managethe media items residing on the media player 804. For example, to “add”a media item to the media player 804, the management module 806 servesto identify the media item to be added to the media player 804 from themedia store 808 and then causes the identified media item to bedelivered to the media player 804. As another example, to “delete” amedia item from the media player 804, the management module 806 servesto identify the media item to be deleted from the media store 808 andthen causes the identified media item to be deleted from the mediaplayer 804. As still another example, if changes (i.e., alterations) tocharacteristics of a media item were made at the host computer 802 usingthe management module 806, then such characteristics can also be carriedover to the corresponding media item on the media player 804. In oneimplementation, the additions, deletions and/or changes occur in abatch-like process during synchronization of the media items on themedia player 804 with the media items on the host computer 802.

In another embodiment, the media player 804 has limited or no capabilityto manage playlists on the media player 804. However, the managementmodule 806 within the host computer 802 through management of theplaylists residing on the host computer can indirectly manage theplaylists residing on the media player 804. In this regard, additions,deletions or changes to playlists can be performed on the host computer802 and then by carried over to the media player 804 when deliveredthereto.

As previously noted, synchronization is a form of media management. Theability to automatically initiate synchronization was also previouslydiscussed above and in the related application noted above. Stillfurther, however, the synchronization between devices can be restrictedso as to prevent automatic synchronization when the host computer andmedia player do not recognize one another.

According to one embodiment, when a media player is first connected to ahost computer (or even more generally when matching identifiers are notpresent), the user of the media player is queried as to whether the userdesires to affiliate, assign or lock the media player to the hostcomputer. When the user of the media player elects to affiliate, assignor lock the media player with the host computer, then a pseudo-randomidentifier is obtained and stored in either the media database or a filewithin both the host computer and the media player. In oneimplementation, the identifier is an identifier associated with (e.g.,known or generated by) the host computer or its management module andsuch identifier is sent to and stored in the media player. In anotherimplementation, the identifier is associated with (e.g., known orgenerated by) the media player and is sent to and stored in a file ormedia database of the host computer.

Image based browsers with image functionality typically require severaldifferent image formats to support the various display modes of thebrowser. For example, the browser may require a full image for theprimary position as well as various thumbnail images for the secondarypositions, which may help a user browse through a group of images. Thismay include partial versions, skewed versions, versions that includedreflection, and the like.

One method for creating the various images of the image browser windowis to download the original image to the portable media device and thento transcode the original image into the required formats on theportable media device when they need to be displayed. This is sometimesreferred to as processing data on-the-fly. While this may work, it isgenerally believed that this methodology has several drawbacks that makeit less appealing to the user. For example, because formatting images isa process intensive task (especially on portable media devices that lackthe horsepower of their larger hosts), portable media devices tend tooperate slowly and consume more power. Hence, formatting images onportable media devices can result in an unsatisfactory user experience.For one, the user has to wait while the image is being formatted. Foranother, the battery of the portable media device tends to run out moreregularly.

In order to reduce or overcome these drawbacks, images can bepreformatted on the host before or during the download thereto. When animage is identified for download various preformatted images derivedfrom the original image (and possibly the original images) are sent tothe portable media device. The processing is performed on the host,which can handle these tasks more easily than the portable media player.The tasks may, for example, include scaling, cropping, rotation, colorcorrection, skewing, reflection, and the like. Once received by theportable media device, the preformatted images are stored for later use.By storing these images, the media device is relieved from having toperform any of the labor intensive tasks associated with imageformatting. That is, the preformatted images relieve the media device ofmuch of the work required to display them. As a result, the deviceoperates faster and without repeated needs for recharging. In oneembodiment, at least some of the preformatted images are thumbnailimages.

During media device use, the image based browser may request that animage to be displayed. Instead of processing the original image as inthe method described above, the device simply obtains the appropriatepreformatted image from media database and presents it to the user on adisplay. The preformatted images may include a full image for theprimary position and several different thumbnail sized images for thesecondary positions. However, in some cases, the media device can stillbe used to perform some processing when image are to be presented (e.g.,transitions, animations, skew, reflections, etc.).

In some cases, the media device when connected to a host that expressesor informs the host as to which image formats are desired when an imageis downloaded to the media device. The media device may, for example,send various image profiles corresponding to the different formats tothe host device. The image profile generally contains the attributes orkeys for each image format. By way of example, the image profiles maydescribe size, orientation, pixel format, color depth, etc. for eachimage format. This particular methodology helps with compatibilityissues that typically come up when different media devices havingdifferent versions of software and hardware are used, i.e., the versionof the software/hardware is made irrelevant since the media deviceexpresses what information it wants from the host device.

FIG. 37 is a method 900 of transferring image data between a host deviceand a portable media device, in accordance with one embodiment of thepresent invention. The method 900 may, for example, be performed bymedia management software. The method includes blocks 902, 904 and 906.In block 902, an image download request is received at the host device.The image download request designates images stored on the host devicefor downloading to the portable media device. The request can be made atthe host device or the media device through a user interface. Forexample, the user may select a group of images and then select adownload button. Alternatively, the request can be made by the mediadevice without user input.

In block 904, an image collection for each requested image is producedat the host device. Each image collection contains the new versions ordifferent formats of the original image. In some cases, the imagecollection may also contain the original image. For example, the newversions may include a primary image and various secondary images, eachof which are typically smaller versions of the primary image (and may bereconfigured, skew, reflect, etc.). It should be noted that the filesizes of the new versions are typically much smaller than the file sizeof the original image. They therefore take up less space in storage thanwould the corresponding original image.

Each new version has a different image profile based on the displayneeds of the portable media device. The image profiles for particularmedia devices may be stored in the host device or the image profiles maybe given to the host device by the media device. In the first case, themedia device may provide the host device with an Identifier (ID), whichcan be used by the host to determine the image profiles for therequesting media device. For example, after obtaining the ID, the hostmay refer to a previously stored table or list that includes all thecapabilities of the identified media device. In the later case, themedia device may automatically upload this information as part ofsynchronization or handshaking procedure with the host device.

In block 906, the image collection for each requested image is sent tothe portable media device as part of the downloading process. Oncereceived by the portable media device, the image collection is stored inthe portable media device for later use. The image collection may bestored in the memory of the portable media device. In order toefficiently store the images in memory, each of the different image setsmay be stored in their own file.

Once downloaded and during operation of the media device, a displayrequest may be made on the media device. Thereafter, one or more imagesare retrieved from memory based on the display request. The displayrequest indicates the images to be shown on the media player. Onceretrieved, the images can be displayed. In a browse mode, the images aredisplayed as determined by the browser.

FIG. 38 is an operational method for a portable media device 1000, inaccordance with one embodiment of the present invention. The methodincludes blocks 1002, 1004, 1006 and 1008. In block 1002, image data isstored. The image data includes at least a plurality of imagecollections. The image collections contain a plurality of differentlyformatted images based on an original image and may also include theoriginal image. The image collections are not formed on the portablemedia device; instead, they are separately generated on a device otherthan the portable media device. The image collections may for example begenerated on a host device that downloads them to the portable mediadevice for storage. By way of example, the image collections may beprovided by the method described in FIG. 37. Alternatively oradditionally, the image collections may be downloaded from anotherportable media device that has already downloaded them from a host.

In block 1004, a display command is received. The display commanddesignates one or more images of the image data to be displayed. Thedisplay command may be generated via a user making a selection on theuser interface of the media player.

In block 1006, at least the designated images are retrieved. In somecases, only the designated images are retrieved. In other case, morethan the designated images are retrieved. For example, although thedisplay command may only designate a single image, other imagesassociated or linked to that image may be additionally retrieved.

In block 1008, the one or more retrieved images are outputted. Theretrieved images may be outputted to a display. Upon receiving theretrieved images, the retrieved images are displayed. In some cases, allof the images are displayed, and in other case only a portion of theimages are displayed. The later case may be implemented when the sizeand number of images is greater than the screen size and/or the numberof positions in the image based browser.

Examples of transferring images between a host and a portable device aswell as displaying images at a portable device can be found in U.S.patent application Ser. No. 10/973,657, which is herein incorporated byreference.

Although the media items (or media assets) of emphasis in several of theabove embodiments were audio items (e.g., audio files or songs), themedia items are not limited to audio items. For example, the media itemscan alternatively pertain to videos (e.g., movies) or images (e.g.,photos).

Although the invention was described in several embodiments above withrespect to portable electronic devices, the invention is not limited touse on portable electronic devices. Other embodiments of the inventioncan be used on other electronic devices, which may or may not beportable, such as computers (e.g., personal computer), media players(e.g., music, videos, games, images), or media storage devices.

The various aspects, embodiments, implementations or features of theinvention can be used separately or in any combination.

The invention is preferably implemented by software, but can also beimplemented in hardware or a combination of hardware and software. Theinvention can also be embodied as computer readable code on a computerreadable medium. The computer readable medium is any data storage devicethat can store data which can thereafter be read by a computer system.Examples of the computer readable medium include read-only memory,random-access memory, CD-ROMs, DVDs, magnetic tape, and optical datastorage devices. The computer readable medium can also be distributedover network-coupled computer systems so that the computer readable codeis stored and executed in a distributed fashion.

While this invention has been described in terms of several preferredembodiments, there are alterations, permutations, and equivalents, whichfall within the scope of this invention.

It should also be noted that there are many alternative ways ofimplementing the methods and apparatuses of the present invention. It istherefore intended that the following appended claims be interpreted asincluding all such alterations, permutations, and equivalents as fallwithin the true spirit and scope of the present invention.

What is claimed is:
 1. A portable electronic device, comprising: a touchscreen display configured to operate as a user input device and a useroutput device; at least one memory device capable of storing a pluralityof images capable of being displayed on said touch screen display; and aprocessing device operatively connected to said touch screen display andsaid at least one memory device, wherein said processing device isconfigured to: in accordance with a determination that the device is inthe first orientation, present a first graphical user interface forscrolling through a list comprising one or more entries, wherein eachentry in the list corresponds to a media item in a set of media items;in accordance with a determination that the device is in the secondorientation, present a second graphical user interface, wherein thesecond graphical user interface is configured to: display a firstgraphical representation in a primary mode on said touch screen display,wherein the primary mode is for displaying one or more graphicalrepresentations with a 2D appearance; display a second graphicalrepresentation in a secondary mode on said touch screen display, whereinthe secondary displaying one or more graphical representations with a 3Dappearance; detect a gesture input with said touch screen display;determine that the gesture input comprises a navigational input, whereinthe navigational input is a slide gesture of one or more of the user'sfingers on or over the touch screen display; and in accordance with adetermination that the received gesture input is a navigational input,perform an animated transition such that the first graphical userrepresentation is transitioned to the secondary mode from the primarymode on said touch screen display and the second graphicalrepresentation is transitioned to the primary mode from the secondarymode on said touch screen display; wherein the animated transitionoperates to skew the first graphical representation while beingtransitioned into the secondary mode, and to skew the second graphicalrepresentation while being transitioned into the primary mode.
 2. Aportable electronic device as recited in claim 1, wherein the firstgraphical representation is a first graphical user interface having afirst plurality of selectable images that are capable of being selectedto initiate corresponding functions on the electronic device, andwherein the second graphical representation is a second graphical userinterface having a second plurality of selectable images.
 3. A portableelectronic device as recited in claim 1, wherein the first graphicalrepresentation includes at least one selectable icon pertaining to anapplication stored by said memory device and operable on said portableelectronic device.
 4. A portable electronic device as recited in claim1, wherein the first graphical representation pertains to at least oneapplication operable on said portable electronic device.
 5. A portableelectronic device as recited in claim 1, wherein the animated transitionappears as a rotation from the first graphical representation to thesecond graphical representation.
 6. The portable electronic device ofclaim 5, wherein, during the animated transition, the first graphicalrepresentation is skewed such that the first graphical representationappears to be moving between foreground and background.
 7. The portableelectronic device of claim 1, wherein a direction of the animatedtransition depends on a direction associated with the sliding gesture.8. The portable electronic device of claim 1, wherein the firstgraphical representation is a first image, and the second graphicalrepresentation is a second image.
 9. The portable electronic device ofclaim 1, wherein the second graphical interface is further configuredto: determine that the gesture input comprises a selection input; and inaccordance with a determination that the received gesture is a selectioninput, perform an operation associated with play back of a media itemcorresponding to the first graphical representation in the primary mode.10. The portable electronic device of claim 1, wherein, during theanimated transition, the first graphical representation is skewed suchthat the first graphical representation appears to be moving betweenforeground and background, and the second graphical representation isskewed such that the second graphical representation appears to bemoving between background and foreground.
 11. A portable electronicdevice, comprising: a touch screen display configured to operate as auser input device and a user output device; at least one memory devicecapable of storing computer program code and a plurality of imagescapable of being displayed on said touch screen display; and aprocessing device operatively connected to said touch screen display andsaid at least one memory device, said processing device capable ofexecuting at least a portion of the computer program code, wherein thecomputer program code includes at least: computer program code forpresenting a first graphical user interface for scrolling through a listcomprising one or more entries in accordance with a determination thatthe device is in the first orientation, wherein each entry in the listcorresponds to a media item in a set of media items; and computerprogram code for presenting a second graphical user interface inaccordance with a determination that the device is in the secondorientation, wherein the second graphical user interface is configuredto: display a first graphical representation on the touch screendisplay, wherein the primary mode is for displaying one or moregraphical representations with a 2D appearance; display a secondgraphical representation in a secondary mode on said touch screendisplay, wherein the secondary mode is for displaying one or moregraphical representations with a 3D appearance; receive a gesture inputwith said touch screen display; determine that the gesture inputcomprises a navigational input, wherein the navigational input is aslide gesture of one or more of the user's fingers on or over the touchscreen display; and in accordance with a determination that the receivedgesture input is a navigational input, perform an animated transitionsuch that the first graphical representation is transitioned to thesecondary mode from the primary mode on the touch screen display and thesecond graphical representation is transitioned to the primary mode fromthe secondary mode on the touch screen display; wherein the animatedtransition operates to skew the first graphical representation whilebeing transitioned into the secondary mode, and skew the secondgraphical representation while being transitioned into the primary mode.12. A portable electronic device as recited in claim 11, wherein theanimated transition appears as a rotation from the first graphicalrepresentation to the second graphical representation.
 13. A portableelectronic device as recited in claim 12, wherein, during the animatedtransition, the first graphical representation is skewed such that thefirst graphical representation appears to be moving between foregroundand background.
 14. A portable electronic device as recited in claim 11,wherein the first graphical representation is a first image, and thesecond graphical representation is a second image.
 15. A portableelectronic device as recited in claim 11, wherein the first graphicalrepresentation pertains to at least one application operable on theelectronic device.
 16. A portable electronic device as recited in claim11, wherein the first graphical representation includes a plurality ofselectable graphical images that are capable of being selected toinitiate corresponding functions on the electronic device, and whereinthe second graphical representation is a second graphical user interfacehaving a second plurality of selectable images.
 17. A portableelectronic device as recited in claim 11, wherein the direction of theanimated transition depends on a direction associated with the userinput.
 18. The portable electronic device of claim 11, wherein thesecond graphical interface is further configured to: determine that thegesture input comprises a selection input; and in accordance with adetermination that the received gesture is a selection input, perform anoperation associated with play back of a media item corresponding to thefirst graphical representation in the primary mode.
 19. The portableelectronic device of claim 11, wherein the first graphicalrepresentation includes at least one selectable icon pertaining to anapplication stored by said memory device and operable on said portableelectronic device.
 20. The portable electronic device of claim 11,wherein, during the animated transition, the first graphicalrepresentation is skewed such that the first graphical representationappears to be moving between foreground and background, and the secondgraphical representation is skewed such that the second graphicalrepresentation appears to be moving between background and foreground.21. A method of operating an electronic device with a touch screendisplay, at least one memory device capable of storing a plurality ofimages capable of being displayed on said touch screen display and aprocessing device operatively connected to said touch screen display andsaid at least one memory device, the method comprising: in accordancewith a determination that the device is in the first orientation,presenting a first graphical user interface for scrolling through a listcomprising one or more entries, wherein each entry in the listcorresponds to a media item in a set of media items; in accordance witha determination that the device is in the second orientation, presentinga second graphical user interface, wherein the second graphical userinterface comprises: displaying a first graphical representation in aprimary mode on said touch screen display, wherein the primary mode isfor displaying one or more graphical representations with a 2Dappearance; displaying a second graphical representation in a secondarymode on said touch screen display, wherein the secondary mode is fordisplaying one or more graphical representations with a 3D appearance;detecting a gesture input with said touch screen display; determiningthat the that the gesture input comprises a navigational input, whereinthe navigational input is a slide gesture of one or more of the user'sfingers on or over the touch screen display; and in accordance with adetermination that the received gesture input is a navigational input,performing an animated transition such that the first graphical userrepresentation is transitioned to the secondary mode from the primarymode on said touch screen display and the second graphicalrepresentation is transitioned to the primary mode from the secondarymode on said touch screen display; wherein the animated transitionoperates to skew the first graphical representation while beingtransitioned into the secondary mode, and to skew the second graphicalrepresentation while being transitioned into the primary mode.
 22. Themethod as recited in claim 21, wherein a direction of the animatedtransition depends on a direction associated with the sliding gesture.23. The method as recited in claim 21, wherein the second graphicalinterface further comprises: determining that the gesture inputcomprises a selection input; and in accordance with a determination thatthe received gesture is a selection input, performing an operationassociated with play back of a media item corresponding to the firstgraphical representation in the primary mode.
 24. The method as recitedin claim 21, wherein the first graphical representation is a firstimage, and the second graphical representation is a second image. 25.The method as recited in claim 21, wherein the first graphicalrepresentation is a first graphical user interface having a firstplurality of selectable images that are capable of being selected toinitiate corresponding functions on the electronic device, and whereinthe second graphical representation is a second graphical user interfacehaving a second plurality of selectable images.
 26. The method asrecited in claim 21, wherein the first graphical representation pertainsto at least one application operable on said portable.
 27. The method asrecited in claim 21, wherein the first graphical representation includesat least one selectable icon pertaining to an application stored by saidmemory device and operable on said portable electronic device.
 28. Themethod as recited in claim 21, wherein the animated transition appearsas a rotation from the first graphical representation to the secondgraphical representation.
 29. The method as recited in claim 28,wherein, during the animated transition, the first graphicalrepresentation is skewed such that the first graphical representationappears to be moving between foreground and background.
 30. The methodas recited in claim 21, wherein, during the animated transition, thefirst graphical representation is skewed such that the first graphicalrepresentation appears to be moving between foreground and background,and the second graphical representation is skewed such that the secondgraphical representation appears to be moving between background andforeground.